角度4与Plotly

Question

我正在尝试构建一个需要图形的角度4应用程序.

我打算使用plotly,但我没有得到任何明确的网站显示步骤或方法在angular 4应用程序中包含plotly.js文件.

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

Answer 1

这就是我所做的,首先是使用NPM(或您使用的任何包管理器)安装plotly.js:

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

注意:您可以考虑在dev部分安装@types (-- save -dev)

然后我编辑src/tsconfig.app.json包括这个,在compilerOptions:

    "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

现在有一个官方的Angular包装用于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'}
    };
}