使用 vue js 动态更新 Amcharts4 图表答案

【问题标题】：Update Amcharts4 chart dynamically using vue js使用 vue js 动态更新 Amcharts4 图表
【发布时间】：2019-05-04 14:26:14
【问题描述】：

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

【问题讨论】：

您能否分享Minimal, Complete, and Verifiable example，以便我们重现您的问题？
@SamuelPhilipp 完成

标签： vue.js amcharts amcharts4

【解决方案1】：

原因是虽然 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
            }
        }

干杯！

【讨论】：