Question

我正在尝试使用Chartjs在Vue组件中构建和管理图表，对于导入标签后应该在图表标签var myChart = new Chart(ctx, {...});中初始化图表实例的确切位置，我感到非常困惑chartjs库？我也在使用Vue CLI Webpack设置

换句话说，我不确定是否应该在export default {}块的内部或外部对其进行初始化，如果位于内部，则应在打开花括号后直接在{{1}内部进行初始化。 }功能？
也是图表的实际内容，它们是否应该在与初始化图表实例相同的作用域内？
如果有人也可以帮助更改方法，将不胜感激通过在图表下方的输入字段中传递值来获得图表中条形的实际值。

这是初级前端开发人员职位的测试任务，任何帮助都将是无价的：D

谢谢！

Answer 1

在组件中的export default {}之前，导入“图表”模块。

import Chart from 'chart.js';

export default {}

假设这是您的template：

<template>
  <div id="app">
    <canvas id="your-chart"></canvas>
  </div>
</template>

然后，您可以添加将创建图表的方法：

methods: {
  createChart(chartId, chartData) {
    const ctx = document.getElementById(chartId);
    const myChart = new Chart(ctx, {
      type: chartData.type,
      data: chartData.data,
      options: chartData.options,
    });
  }
}

并在已安装的生命周期内调用它：

mounted() {
  const data = { // chartobject }
  this.createChart('planet-chart', data);
}

或者，您可以使用vue wrapper for Chart.js

在VueJs组件中使用ChartJs

1 个答案: