Не удалось отобразить диаграмму - «не удается получить контекст из данного элемента» - PullRequest
Новая
       20

Не удалось отобразить диаграмму - «не удается получить контекст из данного элемента»

0 голосов
/ 05 июня 2019

Я пытаюсь загрузить диаграмму из библиотеки charts.js в моем приложении Vue.js и Vuetify, но отображается следующая ошибка:

Не удалось создать диаграмму: невозможно получить контекст из данного элемента

Затем, когда я пытаюсь добавить функцию .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 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

1 Ответ

0 голосов
/ 05 июня 2019

Кажется, вы звоните 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;

Это должно решить вашу проблему.

...