कोणीय 2 टाइपस्क्रिप्ट

Question

में थर्ड पार्टी जेएस मैं कोणीय और टाइपस्क्रिप्ट के लिए नया हूं, इसलिए यह शायद वास्तव में मूलभूत है।

मैं टेम्पलेट में चार्ट (चार्ट.जेएस का उपयोग करके) के साथ एक कोणीय 2 घटक बनाने की कोशिश कर रहा हूं।

मुझे एहसास है कि chart directive विकसित किया जा रहा है, जो विशेष रूप से चार्ट.जेएस का उपयोग करता है, लेकिन मैं यह समझना चाहता हूं कि यह कैसे करें, क्योंकि निस्संदेह यह एक उदाहरण में आ जाएगा जहां निर्देश उपलब्ध नहीं है।

अब तक मैं टेम्पलेट में इस सरल बात करने की कोशिश की है:

<canvas id="chart"></canvas> 
<script> 
$(function() { 
//instantiate chart on $("#chart") 
}); 
</script> 

लेकिन इस जावास्क्रिप्ट यहाँ तक कि जब टेम्पलेट angular2 द्वारा लोड किया गया है नहीं चलता है।

मैं इसके बारे में कैसे जाऊं?

Answer 1

ठीक है - @Pogrindis की मदद से मुझे लगता है कि मुझे एक उपयोगी, बहुत जटिल समाधान नहीं मिला है।

बस here से chart.js के लिए टाइपिंग परिभाषा जोड़ने और एक कस्टम निर्देश में यह संदर्भित करके मैं अंत में यह है:

chart.directive.ts

/// <reference path="../../typings/chartjs/chart.d.ts" /> 

import {Directive, ElementRef, Renderer, Input} from 'angular2/core'; 
@Directive({ 
    selector: '[chart]' 
}) 
export class ChartDirective { 
    constructor(el: ElementRef, renderer: Renderer) { 
     //el.nativeElement.style.backgroundColor = 'yellow'; 
     var data = { 
      labels: ["January", "February", "March", "April", "May", "June", "July"], 
      datasets: [ 
       { 
        label: "My First dataset", 
        fillColor: "rgba(220,220,220,0.2)", 
        strokeColor: "rgba(220,220,220,1)", 
        pointColor: "rgba(220,220,220,1)", 
        pointStrokeColor: "#fff", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "rgba(220,220,220,1)", 
        data: [65, 59, 80, 81, 56, 55, 40] 
       }, 
       { 
        label: "My Second dataset", 
        fillColor: "rgba(151,187,205,0.2)", 
        strokeColor: "rgba(151,187,205,1)", 
        pointColor: "rgba(151,187,205,1)", 
        pointStrokeColor: "#fff", 
        pointHighlightFill: "#fff", 
        pointHighlightStroke: "rgba(151,187,205,1)", 
        data: [28, 48, 40, 19, 86, 27, 90] 
       } 
      ] 
     }; 
     var ctx: any = el.nativeElement.getContext("2d"); 
     var lineChart = new Chart(ctx); 
     ////var lineChartOptions = areaChartOptions; 
     ////lineChartOptions.datasetFill = false; 
     lineChart.Line(data); 
    } 
} 

app.component.ts

import {Component} from 'angular2/core'; 
import {ChartDirective} from './chart.directive'; 

@Component({ 
    directives: [ChartDirective], 
    selector: 'chart-graph', 
    templateUrl: '/js/app/template.html' 
}) 

export class AppComponent { } 

और template.html:

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