带有情节的Angular 4

Question

我正在尝试构建一个需要图形的 Angular 4 应用程序。

我打算使用 plotly，但我没有得到任何清晰的网站显示在 angular 4 应用程序中包含 plotly.js 文件的步骤或方式。

有人可以给我一些见解吗？

Answer 1

这就是我所做的，首先是使用 NPM（或您使用的任何包管理器）安装 plotly.js：

npm install plotly.js --save
npm install @types/plotly.js --save

注意：你可以考虑在dev section (--save-dev)中安装@types

然后我在compilerOptions 下编辑了src/tsconfig.app.json 以包含此内容：

    "types": [
      "plotly.js"
    ],"paths": {
      "plotly.js": [
        "../node_modules/plotly.js/dist/plotly-basic.js"
      ]
    }

然后，您可以通过如下方式在任何组件中使用 Plotly.js：

import * as Plotly from 'plotly.js';
import {Config, Data, Layout} from 'plotly.js';

Answer 2

现在有一个official Angular wrapper for plot.ly

npm install angular-plotly.js plotly.js

将情节添加到您的主应用模块：

import { PlotlyModule } from 'angular-plotly.js';

@NgModule({
    imports: [CommonModule, PlotlyModule],
    ...
})
export class AppModule { }

然后可以像这样将图表添加到组件中：

@Component({
    selector: 'plotly-example',
    template: '<plotly-plot [data]="graph.data" [layout]="graph.layout"></plotly-plot>',
})
export class PlotlyExampleComponent {
    public graph = {
        data: [
            { x: [1, 2, 3], y: [2, 6, 3], type: 'scatter', mode: 'lines+points', marker: {color: 'red'} },
            { x: [1, 2, 3], y: [2, 5, 3], type: 'bar' },
        ],
        layout: {width: 320, height: 240, title: 'A Fancy Plot'}
    };
}