Angular使用Plotly.js设置柱状图/饼图type属性时报Data[]类型不匹配

问题根源 #

你遇到的是TypeScript类型校验报错：默认情况下TS会将对象中赋值的"bar"/"pie"这类字符串推断为通用string类型，但Plotly定义的Data类型要求type属性必须是预定义的图表类型字面量（如"bar"/"pie"/"line"等），通用string无法直接赋值给固定字面量类型，因此抛出类型不兼容错误。

解决方案 #

方案1（推荐：保留类型校验） #

1. 首先安装Plotly的类型声明包（如果未安装）：

npm i --save-dev @types/plotly.js

2. 在组件代码中给你的data数组显式标注Plotly.Data[]类型即可，示例如下：

import Plotly from 'plotly.js-dist-min';

// 柱状图示例
const xArray = ["Italy", "France", "Spain", "USA", "Argentina"];
const yArray = [55, 49, 44, 24, 15];
// 显式指定类型
const data: Plotly.Data[] = [{
  x: xArray,
  y: yArray,
  type: "bar"
}];
const layout = {title:"World Wide Wine Production"};
Plotly.newPlot("bars", data, layout);

饼图场景同理，只要给data数组标注Plotly.Data[]类型即可解决报错。

方案2（临时绕开校验） #

如果不需要类型校验，可以通过类型断言锁死type的字面量属性，无需额外安装依赖：

const data = [{
  x: xArray,
  y: yArray,
  // 告诉TS当前值是固定字面量"bar"，不是通用string
  type: "bar" as const
}];

也可以直接将data断言为any类型（不推荐，会丢失所有类型校验能力）：

const data: any = [{
  x: xArray,
  y: yArray,
  type: "bar"
}];

内容的提问来源于stack exchange，提问作者Sprookd