在 VueJs 组件中使用 ChartJs答案

【问题标题】：Using ChartJs In a VueJs component在 VueJs 组件中使用 ChartJs
【发布时间】：2018-12-30 08:40:40
【问题描述】：

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

也是图表的实际情况，它们是否应该在我初始化图表实例的同一范围内？
如果有人也可以帮助解决如何更改通过在图表下方的输入字段中传递值来获取图表中条形的实际值。

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

提前致谢！

【问题讨论】：

其实很简单。我有带有图表 js 的 vue (webpack cli) 应用程序，你可以在 20 分钟内创建一个简单的图表，但你卡在哪里了？您可以在方法中初始化对象（假设您有多个图表）
也检查一下：github.com/misterGF/CoPilot/blob/master/src/components/views/… 该页面使用图表copilot.mistergf.io，即使代码很冗长（因为它们在模板内生成假数据），您也可以更简单地完成它
非常感谢您的回答，但我仍然无法理解代码的最后一部分，我是 Vue 的新手，我再次使用 webpack CLI ..现在，我安装了使用var myChart = new Chart(ctx, {...}); 块的图表对象及其数据，但我被困在组件中渲染它，根据@sorxrob 的回答，我没有得到应该使用mounted() 渲染图表的最后一部分，，我确实很喜欢代码，但它没有渲染.. :S.. 再次提前感谢
调用你的图表渲染方法 insidd mounted()
很抱歉，有什么方法可以直接和你聊天，我做过，但还是出错，请问您使用任何社交网络或聊天应用程序吗？甚至whatsapp聊天会更容易

标签： javascript vue.js chart.js vuetify.js

【解决方案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

【讨论】：

非常感谢您的回答:)，我使用var myChart = new Chart(ctx, {...}); 构建了图表并填充了我的数据，但我仍然无法理解mounted() 部分，它没有呈现在我的页面使用你的方式mounted() { const data = { // chartobject } this.createChart('planet-chart', data); }，你能否进一步澄清它应该如何呈现？再次提前感谢。这件事现在真的让我很难过:(