Plotly.js Angular 4 如何为直方图导入 plotlyjs-cartesian 包？答案

【问题标题】：Plotly.js Angular 4 how to import plotlyjs-cartesian bundle for histogram chart?Plotly.js Angular 4 如何为直方图导入 plotlyjs-cartesian 包？
【发布时间】：2026-01-17 11:15:02
【问题描述】：

我正在使用 Angular 4 开发一个 Web 应用程序。我基于这个post (Angular 4 with Plotly)成功导入了Plotly.js

plotly.js 基本包可以很好地与折线图配合使用。但我无法在打字稿中使用直方图和 2d 密度图。我怀疑我需要导入 plotlyjs-cartesian 包。

输出示例

这是我的 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”，但这也不起作用。

对于在这种情况下为 Histogram、Histogram2d 图表导入 plotlyjs-cartesian 包有何建议？

【问题讨论】：

标签： angular typescript histogram plotly

【解决方案1】：

我解决了这个问题。我没有使用plotly-basic.min.js 捆绑包，而是在angular-cli.json 和tsconfig.app.json 中都使用plotly.min.js。带有直方图子图的 2D 直方图等高线图在 Angular 4/5，Typescript 代码中得到了很好的体现。

【讨论】：