Apexchart 不使用 axios 动态更新 [英] Apexchart does not update dynamically using axios
问题描述
updateSeries 函数似乎不起作用.我不知道为什么它没有.uChart() 函数确实被调用了.我有以下代码:
<div><菜单></菜单><h1>我们的主页！<apexchart ref="chart1" width="500" type="line" :options="options" :series="series"></apexchart>从./Menu"导入菜单从 'axios' 导入 axios
出口默认{name: '家',成分: {'菜单':菜单},数据:函数(){返回 {选项: {图表: {高度:350，类型:'酒吧'，id:'图表'},数据标签:{启用:假},系列: []，标题: {text: 'Ajax 示例',},没有数据: {文本:'加载...'}}}},挂载:函数(){this.uChart()},方法: {uChart:函数(){公理.get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly').then(功能(响应){this.$refs.chart1.updateSeries([{name: '销售',数据: response.data}])});console.log(this.$refs.chart1);}}对图表的引用与 JSON 数据的链接一样有效.但图表仍处于加载"状态.:这就是网站上的实际情况以及我得到的错误
正如 Estus Flask 在他的评论中提到的那样.这个问题的答案是对then"参数使用箭头语法，因为它是一个回调.因此正确的函数如下所示:
方法:{uChart:函数(){公理.get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly').then(响应 => {this.$refs.chart1.updateSeries([{name: '销售',数据: response.data}])});console.log(this.$refs.chart1);}}有关此主题的更多详细信息，请查看此问题的答案:如何访问正确的this里面回调?
The updateSeries function does not seem to work. I can't find out why it doesn't though. The uChart() function does indeed get called. I have the following code:
<template>
<div>
<Menu></Menu>
<h1> Our Home Website! </h1>
<apexchart ref="chart1" width="500" type="line" :options="options" :series="series"></apexchart>
</div>
import Menu from './Menu' import axios from 'axios'
export default {
name: 'Home',
components: {
'Menu': Menu
},
data: function () {
return {
options: {
chart: {
height: 350,
type: 'bar',
id: 'chart'
},
dataLabels: {
enabled: false
},
series: [],
title: {
text: 'Ajax Example',
},
noData: {
text: 'Loading...'
}
}
}
},
mounted: function () {
this.uChart()
},
methods: {
uChart: function() {
axios
.get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
.then(function (response) {
this.$refs.chart1.updateSeries([{
name: 'Sales',
data: response.data
}])
});
console.log(this.$refs.chart1);
}
}
The reference to the chart works as well as the link for the JSON data. But the chart remains on the "loading" state.: This is how it actually looks like on the website and the errors that I get
As Estus Flask mentioned in his comment. The answer to this question is to use the arrow syntax for the "then" argument because it is a callback. Therefore the correct function looks like this:
methods: {
uChart: function() {
axios
.get('http://my-json-server.typicode.com/apexcharts/apexcharts.js/yearly')
.then(response => {
this.$refs.chart1.updateSeries([{
name: 'Sales',
data: response.data
}])
});
console.log(this.$refs.chart1);
}
}
For further details around this topic check the answer to this question:
How to access the correct this inside a callback?
这篇关于Apexchart 不使用 axios 动态更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
