web-dev-qa-db-ja.com

chart.jsはグラフの作成に失敗しました：指定されたアイテムからコンテキストを取得できません

グーグルではまったく情報を見つけることができないため、ノードにアクセスしたことがないため、ここで何か非常に間違ったことをしていると確信しています。

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>

私は、サンプルを機能させようとしています。 npmを介してダウンロードしたnode_modulesディレクトリを、サーバーがサービスを提供する場所に配置し、サービスが提供されていることを確認しましたが、グラフを作成しようとするとこのエラーが発生します。ドキュメントからすべてのチャートコードを取得したため、その部分は正しいと確信していますが、このエラーが発生する理由がわかりません。

javascriptnode.jschart.js
26
deltaskelta

コンストラクターを呼び出すときに、キャンバスの2Dコンテキスト（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 */}
}
32
rckrd

同じエラーが発生するもう1つの理由は、IDによって参照される要素が<canvas>でない場合です。 HTMLソースに<div>要素がありましたが、もちろん機能しませんでした。

74
mavroprovato

私はパーティーに少し遅れていますが、他の開発者がこの投稿にアクセスする場合は、ドキュメントまたはウィンドウを参照しないようにしてください。 angularチームは、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
     });
  }

}

@mavroprovatoが提案するHTML

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

使用できます

これをテンプレートに追加します
<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, {....})
2
Yene Mulatu

このエラーが原因で、チャートをngAfterContentInitではなくconstructorに設定しようとしていました

個人的にはcanvas idをコンテキストの文字列として指定しても問題ありません

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