在VueJs组件中使用ChartJs-Java 学习之路

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

换句话说，我不确定我应该在 export default {} 块内部或外部初始化它，如果它在里面，是应该在打开花括号之后还是在 data() 函数内部？
也是图表的实际值，它们应该在我初始化图表实例的同一范围内吗？
如果有人也可以通过在图表下方的输入字段中传递值来帮助如何更改图表中条形图的实际值，那将是无限欣赏的 .

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

提前致谢！

1 回答

在组件中，在 export default {} 之前，导入Chart模块 .

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

回复于 2024-04-29T09:27:18+08:00

在VueJs组件中使用ChartJs

1 回答

相关问题