在Angular2打字稿第三方JS [英] Third party JS in Angular2 typescript

问题描述

我新的角度和打字稿，所以这可能是非常基本的。

I'm new to angular and typescript, so this is probably really basic.

我试图使一个angular2组件与模板的图表（使用chart.js之）。

I'm trying to make an angular2 component with a chart (using Chart.js) in the template.

我知道有一个图表指令正在开发中，专门使用chart.js之，但我会想了解如何做到这一点，因为这无疑会拿出在实例，其中一个指令是不可用的。

I realize there is a chart directive being developed, that specifically uses Chart.JS, but I would like to understand how to do this, as it will undoubtedly come up in an instance where a directive isn't available.

到目前为止，我已经尝试做模板这个简单的事情：

So far I've tried to do this simple thing in the template:

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

但这个JavaScript的模板已被angular2加载甚至不运行。

But this javascript doesn't even run when the template has been loaded by angular2.

我怎么会去吗？

推荐答案

好吧 - 与@Pogrindis的帮助，我想我找到了一个可用的，没有太复杂的解决方案

Okay - with the help of @Pogrindis I think I found a usable, not too complex solution.

通过简单地从添加打字定义chart.js之这里和在自定义指令引用它，我终于有这样的：

By simply adding the typing definition for chart.js from here and referencing it in a custom directive I finally have this:

chart.directive.ts

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

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：

and template.html:

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

这篇关于在Angular2打字稿第三方JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！