Plotly 不知道带有 typescript 的 React-js 中的“bar”类型

Question

我正在尝试运行一个在带有打字稿的 React JS 项目中使用绘图条形字符的最小工作示例，但我收到打字稿错误，抱怨“条形”不是有效选项。它是/应该是，并且该示例适用于非打字稿 React 项目。

这是我得到的错误 - 它抱怨某些小提琴数据类型，这对我来说没有意义：

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: PlotParams | Readonly<PlotParams>): Plot', gave the following error.
    Type '{ x: number[]; y: number[]; type: string; name: string; }[]' is not assignable to type 'Data[]'.
      Type '{ x: number[]; y: number[]; type: string; name: string; }' is not assignable to type 'Data'.
        Type '{ x: number[]; y: number[]; type: string; name: string; }' is not assignable to type 'Partial<ViolinData>'.
          Types of property 'type' are incompatible.
            Type 'string' is not assignable to type '"violin"'.
  Overload 2 of 2, '(props: PlotParams, context: any): Plot', gave the following error.
    Type '{ x: number[]; y: number[]; type: string; name: string; }[]' is not assignable to type 'Data[]'.

这是我的代码片段

import React from "react";
import Plot from "react-plotly.js";

function App() {
  const data = [
    {
      x: [1, 2, 3],
      y: [100, 50, 300],
      type: "bar",
      name: "Health",
    },
  ];
  

  return (
    <div className="App">
      <Plot data={data} />
    </div>
  );
}

export default App;

Answer 1

您遇到的错误是由于您传递给 Plot 组件的数据与 Plotly 中“条形”图的预期数据类型之间的类型不匹配造成的。错误消息提到它正在解释数据，就好像它是“小提琴”图表一样。

要解决此问题，您应该确保传递给绘图组件的数据具有正确的类型和结构。对于“条形”图表，您应该提供一组数据对象，其中每个对象代表图表上的一条轨迹。

这是更正后的代码：

import React from "react";
import Plot from "react-plotly.js";

function App() {
  const data = [
    {
      x: [1, 2, 3],
      y: [100, 50, 300],
      type: "bar",
      name: "Health",
    },
  ];

  return (
    <div className="App">
      <Plot data={data} />
    </div>
  );
}

export default App;

此代码应该可以正确地在 React TypeScript 项目中使用 Plotly 创建“条形”图。确保您的依赖项（包括react-plotly.js）是最新的，以避免任何潜在的兼容性问题。如果您仍然遇到问题，请验证您的项目中没有任何冲突的类型或依赖项。