2

我将AmCharts4与 Vue.JS 一起使用，

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

代码：-要点

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 }] }

4

1 回答 1

3

这样做的原因是尽管 this.dataForChart.data 是响应式的（它是一个 vue 实例属性），但 chart.data（amcharts 图表属性）不是。

每当您的 this.dataForChart.data 属性更改时，您都必须手动设置 chart.data 数组值。我通过在 this.dataForChart.data 上设置一个观察者来做到这一点，如下所示：

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

干杯!

于 2019-08-02T13:34:31.667 回答