chart.js चार्ट बनाने में विफल: दिए गए आइटम

Question

से संदर्भ प्राप्त नहीं कर सकता है, मुझे कभी भी नोड में नहीं मिला है, इसलिए मुझे पूरा यकीन है कि मैं यहां कुछ गलत तरीके से गलत कर रहा हूं क्योंकि मुझे गुगलिंग से कोई जानकारी नहीं मिल रही है।

मैं मैं chart.js चुना है एक Django साइट है और मैं एक जे एस चार्टिंग पुस्तकालय चाहता था,।

मैं स्थापित और दस्तावेज़ जैसे, लेकिन उसके बाद मैं क्या ऐसा करने के लिए अनिश्चित मैं रिक्त स्थान को भरने और जितना संभव के रूप में उनके गाइड का पालन करने की कोशिश की है। यहां मेरा एचटीएमएल दिखता है ....

<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 के माध्यम से डाउनलोड किया गया था कहीं जहां अपने सर्वर उन्हें काम करेगा डाल .... और सत्यापित वे कार्य किया जा रहा है, लेकिन जब मैं एक चार्ट बनाने की कोशिश तो मैं इस त्रुटि मिलती है। मैंने अपने चार्ट से सभी चार्ट कोड ले लिए हैं, इसलिए मुझे पूरा यकीन है कि हिस्सा सही है, लेकिन मैं नहीं देख सकता कि मुझे यह त्रुटि क्यों मिल रही है।

Answer 1

आप जब निर्माता बुला संदर्भ गुजर नहीं कर रहे हैं।

var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx,{ 
     type: 'line', 
     data: data, 
     options: options 
    }) 

Answer 2

एक अन्य कारण एक ही त्रुटि प्राप्त करने के लिए, अगर तत्व आईडी द्वारा संदर्भित एक <canvas> नहीं है:
यह सही तरीका एक नया चार्ट बनाने के लिए किया जाएगा। मैं अपने HTML स्रोत में एक <div> तत्व था, और निश्चित रूप से यह काम नहीं किया।

Answer 3

मैं पार्टी के लिए थोड़ा देर हो चुकी हूं लेकिन यदि अन्य डेवलपर्स इस पोस्ट तक पहुंचते हैं, तो सुनिश्चित करें कि आप दस्तावेज़ या विंडो का संदर्भ नहीं लेते हैं। कोणीय टीम सीधे डोम चर तक पहुँचने प्रोत्साहित नहीं करता है। उपयोग 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

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

Answer 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, {....})