javascript - 在 Vue.js 组件中定位和操作图表栏和标签

Question

我是 Vue 和图表 js 的新手，我想做的是针对图表，添加、删除和更新图表的标签和数据值。我有一个指向 chartJs 文档的链接，但我遇到的问题是我export default {}可以在块中的哪个范围内定位数据。我在 Vue 组件中设置了图表，我也在使用 CLI Webpack 设置。

// HERE IS MY HTML
<v-flex xs12 md12 width="400px" height="400px" mt-5  >
   <canvas  id="myChart" ></canvas>
</v-flex>

export default {
methods: {
      CreateChart(chartId, chartData) {
        const ctx =   document.getElementById('myChart').getContext('2d');
        var myChart = new Chart(ctx, {
          type: 'bar',
          data: {
            labels: ['JavaScript', 'NodeJs', 'VueJs', 'DataBase'],
            datasets: [{
              label: '# of votes',
              data: [12, 15, 23, 15],
              backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
              ],
              borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
              ],
              borderWidth: 1
            }]
          },
          options: {
            scales: {
              yAxes: [{
                ticks: {
                  beginAtZero: true
                }
              }]
            }
          }
        });
      }
    },

    mounted() {
      let data = data;
      this.CreateChart('chart', data);
    },
}

现在，根据 ChartJs 官方文档，我可以有一个函数，我认为在createChart()`methods{}' 范围内的方法之后，该函数应该允许我以以下方式定位条或标签

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

function removeData(chart) {
    chart.data.labels.pop();
    chart.data.datasets.forEach((dataset) => {
        dataset.data.pop();
    });
    chart.update();
}

提前致谢

标签： javascriptvue.jschart.jsvuetify.js