Question

我在Vue.JS中使用AmCharts4，

目前，我已经添加了页面加载时的默认图表设计，但是当我尝试在页面加载后添加动态值（使用“按钮单击”）时，它并没有反映在视图上。

代码：-gist

data: () => ({ dataForChart: { data: [{ "name": "Anne", "steps": 32 }, { "name": "Rose", "steps": 30 }, { "name": "Jane", "steps": 25 }] } }),

在mounted()上创建图表

let chart = am4core.create("chart-div", am4charts.XYChart); chart.data = this.dataForChart.data

使用按钮动态更改值时，这些数据不会反映在图表上。

随后的方法用于更改数据集。

this.dataForChart.data = { data: [{ "name": "Anne", "steps": 54 }, { "name": "Rose", "steps": 44 }, { "name": "Jane", "steps": 33 }] }

Answer 1

这样做的原因是，尽管this.dataForChart.data是反应性的（这是vue实例属性），而chart.data（amcharts的chart属性）却不是。

每当this.dataForChart.data属性更改时，您都必须手动设置chart.data数组值。我是通过在this.dataForChart.data上设置观察者来完成此操作的：

watch: {
            dataForChart: {
                data(values) {
                    this.chart.data = values;
                },
                deep: true
            }
        }

干杯！

使用Vue JS动态更新Amcharts4图表

1 个答案: