Plotly.js Angular 4如何导入plotlyjs-cartesian bundle for histogram chart?

时间:2018-01-30 07:13:08

标签: angular typescript histogram plotly

我正在使用Angular 4来开发Web应用程序。我已根据此post (Angular 4 with Plotly)

成功导入Plotly.js

plotly.js基本捆绑包适用于折线图。但 我无法将直方图和二维密度图用于打字稿。我怀疑我需要导入plotlyjs-cartesian包。

输出示例

enter image description here

这是component.ts基于plot.ly/javascript/histograms,但在Typescript中。

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

@Component({
    ...
})
export class ChartComponent implements OnInit {
    constructor() {}
    ngOnInit() {
        let x = [];
        for (let i = 0; i < 500; i++) {
            x[i] = Math.random();
        }
        const trace = {
            x: x,
            type: 'histogram',
        };
        const data = [trace];
        Plotly.newPlot('myPlotlyDiv', data);
    }
}

这是我的tsconfig.app.json,“compilerOptions”

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

我尝试在plotly-basic.js之后添加“../node_modules/plotly.js/dist/plotly-cartesian.js”,但这也不起作用。

在这种情况下,有关直方图,Histogram2d图表导入plotlyjs-cartesian包的任何建议吗?

1 个答案:

答案 0 :(得分:1)

我解决了这个问题。我改为在plotly-basic.min.jsplotly.min.js使用angular-cli.json,而不是使用tsconfig.app.json捆绑包。带有直方图子图的二维直方图轮廓图在Angular 4/5,Typescript代码中很好地出现了。