无法渲染图表 - “无法从给定项目获取上下文”答案

【问题标题】：Failing to render chart – "can't acquire context from the given item"无法渲染图表 - “无法从给定项目获取上下文”
【发布时间】：2019-10-21 00:36:05
【问题描述】：

我正在尝试从我的 Vue.js 和 Vuetify 应用程序上的 charts.js 库加载图表，但显示以下错误：

创建图表失败：无法从给定项目获取上下文

然后，当我尝试添加 .getContext("2d) 的功能时，它并没有解决错误。挂载的方法似乎工作正常，因为我已经运行了其他功能而没有任何问题，并且似乎所有内容都已导入正确。我已尝试使用 JQUERY，但仍然存在相同的错误。

这是我的文件供参考：应用程序.vue：

来自模板的画布：

 <canvas id="charting" width="600px" height="600px">
 </canvas>

app.vue JS：

 <script>
 import Chart from '../../../../node_modules/chart.js'
 import coinCharts from './scripts/charts/randomcoin.js'

 export default {
 data() {
 return {
 coinCharts: coinCharts
 }
 },
 methods: {
 createChart(id, chartData) {
 const ctx = document.getElementById(id).getContext("2d");
 const chartRender = new Chart(ctx, {
 type:chartData.type,
 data:chartData.data,
 options: chartData.options
 })}
 },

 mounted() {
 this.createChart("charting", this.coinCharts);
 }
 }

带有图表数据的导入脚本：

export const coinCharts =  new Chart({
type: 'line',

data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [{
label: 'My First dataset',
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},

options: {
responsive:true,
lineTension:1
}
})

export default coinCharts;

编译时出现如下错误：

Module Warning (from ./node_modules/eslint-loader/index.js):
error: 'chartRender' is assigned a value but never used (no-unused-vars) 
at src\components\views\coins\AlphaCoin.vue:50:11:
createChart(id, chartData) {
const ctx = document.getElementById(id).getContext("2d");
const chartRender = new Chart(ctx, {
type:chartData.type,
data:chartData.data,
options: chartData.options

【问题讨论】：

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

【解决方案1】：

您似乎给new Chart() 打了两次电话。一旦在您的图表数据randomcoin.js 上，也在您的createChart(id, chartData) 方法上。尝试将您的图表数据更改为这样的对象：

export const coinCharts = {
type: 'line',

data: {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgb(255, 99, 132)',
    borderColor: 'rgb(255, 99, 132)',
    data: [0, 10, 5, 2, 20, 30, 45]
  }]
},

options: {
  responsive:true,
  lineTension:1
}
}

export default coinCharts;

这应该可以解决您的问题。

【讨论】：