无法呈现图表 – "can't acquire context from the given item"

Question

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

无法

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

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

这是我的文件供参考：app.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 srccomponentsviewscoinsAlphaCoin.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

Answer 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;

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