कोणीय 4 पर चार्ट.जेएस का उपयोग करना

Question

मैं कोणीय 4 के साथ चार्ट.जेएस का उपयोग करने की कोशिश कर रहा हूं, मैंने chart.js दस्तावेज़ों पर एक उदाहरण देखा है, लेकिन यह स्क्रिप्ट खींचने के लिए < स्क्रिप्ट> टैग का उपयोग कर रहा है, इसलिए यह नहीं है घटक पर काम करते हैं। यह मैं कैसे कोणीय में फिट करने की कोशिश की है:

टीएस

export class GraphicsComponent implements OnInit { 

    ctx = document.getElementById("myChart"); 
    myChart = new Chart(this.ctx, { 
    type: 'pie', 
    data: { 
     labels: ["New", "In Progress", "On Hold"], 
     datasets: [{ 
      label: '# of Votes', 
      data: [1,2,3], 
      backgroundColor: [ 
       'rgba(255, 99, 132, 1)', 
       'rgba(54, 162, 235, 1)', 
       'rgba(255, 206, 86, 1)' 
      ], 
      borderWidth: 1 
     }] 
    }, 
    options: { 
     responsive: false, 
     display:true 
    } 
    }); 

    constructor() { } 

    ngOnInit() { 
    } 

} 

एचटीएमएल

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

किसी भी विचार कैसे मैं यह काम होगा?

संपादित करें: मैंने अपना कोड आयात के साथ अपडेट किया है और अब मुझे एक त्रुटि मिल रही है।

आयात कोड:

import * as Chart from 'chart.js' 

क्रोम कंसोल पर त्रुटि:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of null 
TypeError: Cannot read property 'length' of null 
    at Object.acquireContext (platform.dom.js:333) 
    at Chart.construct (core.controller.js:74) 
    at new Chart (core.js:42) 
    at new GraphicsComponent (graphics.component.ts:12) 
    at createClass (core.es5.js:10922) 
    at createDirectiveInstance (core.es5.js:10756) 
    at createViewNodes (core.es5.js:12197) 
    at createRootView (core.es5.js:12092) 
    at callWithDebugContext (core.es5.js:13475) 
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12792) 
    at Object.acquireContext (platform.dom.js:333) 
    at Chart.construct (core.controller.js:74) 
    at new Chart (core.js:42) 
    at new GraphicsComponent (graphics.component.ts:12) 
    at createClass (core.es5.js:10922) 
    at createDirectiveInstance (core.es5.js:10756) 
    at createViewNodes (core.es5.js:12197) 
    at createRootView (core.es5.js:12092) 
    at callWithDebugContext (core.es5.js:13475) 
    at Object.debugCreateRootView [as createRootView] (core.es5.js:12792) 
    at resolvePromise (zone.js:795) 
    at resolvePromise (zone.js:766) 
    at zone.js:844 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425) 
    at Object.onInvokeTask (core.es5.js:3881) 
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) 
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192) 
    at drainMicroTaskQueue (zone.js:602) 
    at <anonymous> 

Answer 1

आप इस तरह के कोणीय के रूप में एक टाइपप्रति वातावरण में पूर्ण कार्यक्षमता के लिए पैकेज स्थापित कर सकते हैं, प्रकार के साथ :

npm install --save chart.js && npm install --save-dev @types/chartjs

फिर अपने घटक में अब आप import * as Chart from 'chart.js' कर सकते हैं और इसे अपने टाइपस्क्रिप्ट वातावरण में उपयोग कर सकते हैं। टाइपस्क्रिप्ट का उपयोग कर कार्यान्वयन विधियों के लिए this example देखें।

क्योंकि आपको डोम से कैनवास प्राप्त करने की आवश्यकता है, आपको यह सुनिश्चित करने की आवश्यकता है कि इसे एक्सेस करने का प्रयास करने से पहले इसे प्रस्तुत किया जाए। इसे AfterViewInit के साथ पूरा किया जा सकता है।

import { Component, AfterViewInit } from '@angular/core'; 

export class MyChartComponent implements AfterViewInit { 

    canvas: any; 
    ctx: any; 

    ngAfterViewInit() { 
    this.canvas = document.getElementById('myChart'); 
    this.ctx = this.canvas.getContext('2d'); 
    let myChart = new Chart(this.ctx, { 
     type: 'pie', 
     data: { 
      labels: ["New", "In Progress", "On Hold"], 
      datasets: [{ 
       label: '# of Votes', 
       data: [1,2,3], 
       backgroundColor: [ 
        'rgba(255, 99, 132, 1)', 
        'rgba(54, 162, 235, 1)', 
        'rgba(255, 206, 86, 1)' 
       ], 
       borderWidth: 1 
      }] 
     }, 
     options: { 
     responsive: false, 
     display:true 
     } 
    }); 
    } 

}