Angular2类型脚本中的第三方JS

我不熟悉angular和typescript，所以这可能是最基本的

我试图在模板中创建一个带有图表（使用chart.js）的angular2组件

我意识到正在开发一个专门使用Chart.JS的应用程序，但我想了解如何做到这一点，因为它无疑会在没有指令的情况下出现

到目前为止，我已尝试在模板中执行以下简单操作：

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

$（函数（）{
//在$（“#图表”）上实例化图表
});

但是当angular2加载模板时，这个javascript甚至不会运行

---

我该怎么做呢？

好的-在@Pogrindis的帮助下，我想我找到了一个可用的、不太复杂的解决方案

通过简单地从添加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);
    }
}

和template.html：

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

您想做什么？这和typescript有什么关系？你的问题和代码没有显示关于typescript的任何内容。你需要用typescript为

chart.js

库编写接口，但可能已经有了一些接口，但你已经做了多少？不@Dynde，

.ts

文件需要强类型，而

js

libs则不是，所以你使用了一个界面：这可能对你有用：另一方面，有一些“黑客”比如说

chartLib:any

，所以any会绕过强输入，但这实际上违背了目的。好的，谢谢。我将尝试阅读更多关于typescript接口的内容。我想我真的不明白这个接口是如何知道chart.js的源代码的——我才刚刚开始typescript@Dynde一个界面不知道！这就是为什么要定义接口，并确保正确使用它！：）我发给你的那个库有很多关于

TS

的第三方定义！谢谢你的提问，这正是我想要的。我有一个大概的想法，为什么您需要DefinitelyTyped，但是我有点困惑如何实现它。1.git克隆定义类型，2。然后在index.html中引用它

？我可以再详细说明一下你的答案。其他一切我都明白，即使是安圭拉！好的，这就是诀窍///我不知道Angular2中的命令或行，出于某种原因，我认为这是一个注释行。无论如何，确保这个答案能让你在Chart.js和Angular2上运行！谢谢@dynde@Dynde你在回答中提到的打字时使用了哪个版本的charts.js？@Anmol哦，该死，时间太长了，我真的不知道，而且这个项目已经被放弃了，所以我不能把它挖出来-对不起。@Dynde不用担心。我想出来了。此处提及的打字对1x版本有效。这些对2x版本无效。2x版本的打字仍在等待中。这个问题在Github上是公开的。

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