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

Я никогда не попадал в узел, поэтому я уверен, что я делаю что-то массовое неправильно, так как я не могу найти какую-либо информацию по googling.

У меня есть сайт django, и мне нужна библиотека диаграмм JS, я выбрал chart.js.

Я установил и, как документы, но после этого я не уверен, что делать, я попытался заполнить пробелы и как можно больше следовать их руководству. Вот как выглядит мой html...

<script src="/public/node_modules/chart.js/dist/Chart.js"></script>

<canvas id="myChart" width="400" height="400"></canvas>

<script>    
    var ctx = document.getElementById("myChart");
    console.log(ctx);

    var options = {}

    var data = {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [
            {
                label: "My First dataset",
                fill: false,
                lineTension: 0.1,
                backgroundColor: "rgba(75,192,192,0.4)",
                borderColor: "rgba(75,192,192,1)",
                borderCapStyle: 'butt',
                borderDash: [],
                borderDashOffset: 0.0,
                borderJoinStyle: 'miter',
                pointBorderColor: "rgba(75,192,192,1)",
                pointBackgroundColor: "#fff",
                pointBorderWidth: 1,
                pointHoverRadius: 5,
                pointHoverBackgroundColor: "rgba(75,192,192,1)",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointHoverBorderWidth: 2,
                pointRadius: 1,
                pointHitRadius: 10,
                data: [65, 59, 80, 81, 56, 55, 40],
                spanGaps: false,
            }
        ]
    };

    var myChart = new Chart({
        type: 'line',
        data: data,
        options: options
    })
</script>

Я просто пытаюсь заставить пример работать. Я поместил каталог node_modules, который был загружен через npm где-то, где мой сервер будет их обслуживать.... и проверял, что они обслуживаются, но затем я получаю эту ошибку, когда пытаюсь построить диаграмму. Я взял все коды диаграмм из своих документов, поэтому я уверен, что часть права, но я не понимаю, почему я получаю эту ошибку.

Ответы

Ответ 1

Вы не передаете контекст (ctx) при вызове конструктора. Из документации:

Чтобы создать диаграмму, нам нужно создать экземпляр класса Chart. Для этого нам нужно передать узел, экземпляр jQuery или 2d контекст холста, где мы хотим нарисовать диаграмму.

<canvas id="myChart" width="400" height="400"></canvas>

Можно использовать любой из следующих форматов:

var ctx = document.getElementById('myChart');
var ctx = document.getElementById('myChart').getContext('2d');
var ctx = $('#myChart');
var ctx = 'myChart';

var myChart = new Chart(ctx, {
  type: 'line',
  data: {/* Data here */},
  options: {/* Options here */}
}

Ответ 2

Другая причина получить ту же ошибку, если элемент, указанный идентификатором, не является <canvas>. У меня был элемент <div> в моем HTML-источнике, и, конечно, это не сработало.

Ответ 3

Я немного опаздываю на вечеринку, но если другие разработчики достигают этой должности, убедитесь, что вы не ссылаетесь на документ или окно. Угловая команда не поощряет непосредственный доступ к переменной dom. Вместо этого используйте ElementRef

import { Component, OnInit, ElementRef } from '@angular/core';
@Component({
  selector: 'my-compo',
  templateUrl: 'mycompo.html',
})
export class MyCompo implements OnInit {
   myChart:any;
   constructor(private elementRef: ElementRef) {
   }

  ngOnInit(){
   this.chartit();
  }

  chartit(){
     let htmlRef = this.elementRef.nativeElement.querySelector('#yourCavasId');
     this.myChart = new Chart(htmlRef, {
        //your data here
     });
  }

}

HTML, предложенный @mavroprovato

<canvas id="yourCavasId" ></canvas>

Ответ 4

вы можете использовать

добавьте это в свой шаблон
<canvas #myCanvas width="500" height="300"></canvas>

добавьте это в свой компонент

@ViewChild('myCanvas') canvasRef: ElementRef;
  constructor()

когда готов рисовать, вызовите это

 this.ctx = this.canvasRef.nativeElement.getContext('2d');
         this.chart = new Chart(this.ctx, {....})

Ответ 5

Была эта ошибка, потому что я пытался установить диаграмму на конструкторе вместо ngAfterContentInit

У меня лично нет проблем с указанием идентификатора холста в качестве строки для контекста.

this.chart = new Chart('myChartId', {...})