如何使用 vuejs + chartjs 中的图表实例更新图表属性？

Question

我正在关注 Alligator 的 tutorial，它解释了如何使用 vue js 和 chart js 创建基本的折线图。代码通过定义createChart vue 方法，导入图表配置planetChartData，然后在挂载vue 实例后调用该方法以创建图形实例。

然而，一旦初始图表被渲染到 html 画布元素，我有兴趣使用新数据点更新折线图。

根据图表jsdocs，可以使用以下函数更新图表。

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

我拿了这个函数，决定把它变成一个vue方法来更新图表。由于坐标数据存储在data 对象中，我可以像这样直接修改planetChartData，但我的问题是我不确定在数组更新后将什么作为chart 参数传递以重新呈现图表，因为 myChart 实例超出范围。我尝试在其他地方初始化myChart，但这总是会产生大量错误。

addAtempt(chart, label, data){
  this.lineChartData.data.labels.push('label')
  this.lineChartData.data.datasets.forEach(dataset => {
    dataset.data.push(data);
  });
  //issue is here
  chart.update()
}

下面是我完整的 vue 组件

 <template>
  <div>
      <h2>Fun Graph</h2>
      <canvas id="planet-chart"></canvas>
  </div>
</template>
<script>
import Chart from "chart.js";
import planetChartData from "./chart-data.js";

export default {
  name: "test",
  data() {
    return {
      text: "",
      planetChartData: planetChartData
    };
  },
  mounted() {
    this.createChart("planet-chart", this.planetChartData);
  },
  methods: {
    createChart(chartId, chartData) {
      const ctx = document.getElementById(chartId);
      const myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options
      });
    },
    addData(chart, label, data) {
      chart.data.labels.push(label);
      chart.data.datasets.forEach(dataset => {
        dataset.data.push(data);
      });
    }
  }
};
</script>

Answer 1

您必须保存对图表实例的引用，即在您的createChart 方法中。

CodeSandbox 上的完整工作示例。

 <template>
  <div>
      <h2>Fun Graph</h2>
      <canvas id="planet-chart"></canvas>
  </div>
</template>
<script>
import Chart from "chart.js";
import planetChartData from "./chart-data.js";

export default {
  name: "test",
  data() {
    return {
      text: "",
      planetChartData: planetChartData,
      myChart: null,
    };
  },
  mounted() {
    this.createChart("planet-chart", this.planetChartData);
  },
  methods: {
    createChart(chartId, chartData) {
      const ctx = document.getElementById(chartId);
      // Save reference
      this.myChart = new Chart(ctx, {
        type: chartData.type,
        data: chartData.data,
        options: chartData.options
      });
    },
    addData(label, data) {
    // Use reference
      this.myChart.data.labels.push(label);
      this.myChart.data.datasets.forEach(dataset => {
        dataset.data.push(data);
      });
    }
  }
};
</script>