Question

我遵循的是Alligator的tutorial，其中介绍了如何使用vue js和chart js创建基本的折线图。该代码通过定义createChart vue方法，导入图表配置planetChartData，然后在安装vue实例以创建图形实例后调用该方法来工作。

但是，我对将初始图表渲染到html canvas元素后用新的数据点更新折线图感兴趣。

根据图表js docs，可以使用以下功能更新图表。

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>

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

1 个答案: