问题 Angular2打字稿中的第三方JS

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

我正在尝试使用模板中的图表（使用Chart.js）创建一个angular2组件。

我意识到有一个图表指令正在开发中，专门使用Chart.JS，但我想了解如何做到这一点，因为毫无疑问它会出现在指令不可用的情况下。

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

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

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

我怎么会这样呢？

好的 - 在@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);
    }
}

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>

你想做什么？这与打字稿有什么关系？你的问题和代码没有显示关于打字稿的内容。 - Pogrindis

你需要在typescript中编写接口 chart.js 图书馆，但可能有一些已经制作，你有多远了？ - Pogrindis

没有@Dynde， .ts 文件需要强类型，和 js libs只是没有，所以你使用一个接口：这可能对你有用： github.com/DefinitelyTyped/DefinitelyTyped/blob/master/chartjs/... 在另一个说明，有'黑客'喜欢说 chartLib: any 所以任何人都会绕过强大的打字，但这真的打败了目的。 - Pogrindis

好的谢谢。我将尝试阅读更多关于打字稿界面的内容。我想我只是不明白该界面如何知道chart.js的来源 - 我只是刚开始打字稿 - Dynde

@Dynde一个界面不知道！这就是为什么你定义界面，并确保你做对了！ :)我发给你的那个库有很多第三方定义 TS ！ - Pogrindis

谢谢你的问题，这正是我想要的。我有一个大概的想法为什么你需要DefinitelyTyped，但是我有点困惑如何实现它。 1. git clone DefinitelyTyped，2。然后引用它 <script src="DefinitelyTyped/chartjs/chart.d.ts"></script> 在index.html？可以详细说明你的答案。其他我理解的东西，即使是Angular2！ - Chad

好的，这就是诀窍/// <reference path =“../ DefinitelyTyped / chartjs / chart.d.ts”/>我不知道这是Angular2中的命令或行，我认为这是注释行因为某些原因。无论如何，确保它正常工作这个答案将让你在Chart.js和Angular2上运行！谢谢@dynde - Chad

@Dynde您使用哪种版本的chart.js与您在答案中提到的打字？ - Anmol Gupta

@Anmol哦，天啊，它已经这么久了，老实说我不知道，而且这个项目已经被遗弃了，所以我无法挖掘它 - 抱歉。 - Dynde

@Dynde不用担心。我想到了。这里提到的类型适用于1x版本。这些不适用于2x版本。仍在等待2x版本的打字。该问题在Github上公开。 github.com/chartjs/Chart.js/issues/1572 - Anmol Gupta

问题 Angular2打字稿中的第三方JS

答案:

热门问题