vue-chart 多实例初始化

Question

我想要多个 vue-chart.js 图表，每个图表每 5 秒刷新一次（添加一个新数据点）。值来自传感器并通过道具传递（我正在为 node-red 应用程序编写 UI，我认为这与问题无关）。

我设法让一个图表完美运行，但如果我放置 2 个图表，传递的值会同时显示在两个图表中（不只是在一个图表中，应该显示它们）。

令我困惑的是，adddata 中的 console.log(this.myChart) 显示“正确”的图表（不同的 id，不同的 context）。我想我已经创建了单独的图形实例，但我仍然不能只向其中一个添加数据。

我不经常使用 vue，我可能遗漏了一些重要的东西。谢谢！

组件Test.vue

<template>
  <div>
    <canvas :id="name"></canvas>
  </div>
</template>

<script>
import Chart from "chart.js";

const chartSetting = {
  type: "line",
  data: {
    datasets: [
      {
        label: "setpoint",
        data: [],
        borderColor: "blue",
        borderWidth: 3,
      },
    ],
  },
  options: {},
};

let interval;

export default {
  name: "test",
  data() {
    return {
      myChart: null,
      chartSetting: chartSetting,
    };
  },
  props: ["id", "name", "setpoint"],
  methods: {
    adddata(setpoint, time) {
      this.myChart.data.datasets[0].data.push(setpoint);
      this.myChart.data.labels.push(time);
      this.myChart.update();
      console.log(`now printing ${setpoint} to this graph:`);
      console.log(this.myChart);
    },

    createChart(chartId, chardData) {
      const ctx = document.getElementById(chartId);
      // Save reference
      this.myChart = new Chart(ctx, {
        type: chardData.type,
        data: chardData.data,
        options: chardData.options,
      });

      interval = setInterval(() => {
        let date = new Date();
        let seconds = date.getSeconds();
        this.adddata(this.setpoint, seconds);
      }, 5000);
    },
  },

  mounted() {
    this.createChart(this.name, this.chartSetting);
  },
};
</script>

App.vue

<template>
  <div id="app">
    <p>
      graphs get new data from 2 different sensors every 5 seconds. Here
      simulated as "6" and "3"
    </p>
    <h3>this graph should only show 6</h3>
    <test name="grap1" id="1" setpoint="6" />
    <h3>this graph should only show 3</h3>
    <test name="grap2" id="2" setpoint="3" />
  </div>
</template>

<script>
import Test from "./components/Test";

export default {
  name: "App",
  components: {
    Test,
  },
};
</script>

Answer 1

chartSetting对象对于所有组件实例都是相同的，因为它在评估组件模块时定义一次。

data 是工厂函数的原因是它 returns 每个实例的新数据对象，不在实例之间共享。

应该是：

  data() {
    const chartSetting = ...

    return {
      myChart: null,
      chartSetting: chartSetting,
    };
  }

vue-chart 多实例初始化

vue-chart multiple instance initialization

javascript

vue.js

vue-chartjs