[英]react plotly js with typescript
I'm using react-plotly.js with typescript and I get the following error from it:我将 react-plotly.js 与 typescript 一起使用,并从中得到以下错误:
No overload matches this call.
Overload 1 of 2, '(props: PlotParams | Readonly<PlotParams>): Plot', gave the following error.
Type '({ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; })[]' is not assignable to type 'Data[]'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; }' is not assignable to type 'Data'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; }' is not assignable to type 'Data'.
Type '{ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; }' is not assignable to type 'Partial<BoxPlotData>'.
Types of property 'type' are incompatible.
Type 'string' is not assignable to type '"box" | undefined'.
Overload 2 of 2, '(props: PlotParams, context: any): Plot', gave the following error.
Type '({ type: string; mode: string; x: number[]; y: number[]; marker: { color: string; }; } | { type: string; x: number[]; y: number[]; mode?: undefined; marker?: undefined; })[]' is not assignable to type 'Data[]'. TS2769
20 | };
21 |
> 22 | const Dashboard = () => <div><Plot data={data} layout={layout} /></div>;
| ^
23 |
24 | export default Dashboard;
25 |
I send to the following data with it, and it doesnt seem to work.我用它发送到以下数据,它似乎不起作用。
const data = [{
type: 'scatter',
mode: 'lines+points',
x: [1, 2, 3],
y: [2, 6, 3],
marker: { color: 'red' },
}, {
type: 'bar',
x: [1, 2, 3],
y: [2, 5, 3],
}];
const layout = {
width: 640,
height: 480,
title: 'A Fancy Plot',
};
const Dashboard = () => <div><Plot data={data} layout={layout} /></div>;
Is it something to do with the data im sending?它与即时发送的数据有关吗? I installed the types of react-plotly, and because of it, I get this error.我安装了 react-plotly 的类型,正因为如此,我得到了这个错误。
Looks like your mode isn't valid:看起来您的模式无效:
mode:
| 'lines'
| 'markers'
| 'text'
| 'lines+markers'
| 'text+markers'
| 'text+lines'
| 'text+lines+markers'
| 'none'
| 'gauge'
| 'number'
| 'delta'
| 'number+delta'
| 'gauge+number'
| 'gauge+number+delta'
| 'gauge+delta';
I was having a similar issue trying to use react-plotly.js with TypeScript.我在尝试将 react-plotly.js 与 TypeScript 一起使用时遇到了类似的问题。
Here you are passing "lines+points" which is not a valid type, but even if you pass a correct type and still facing the issue.在这里,您传递的“线+点”不是有效类型,但即使您传递了正确的类型并且仍然面临问题。
This is how I got it resolved!我就是这样解决的!
Packages required:所需软件包:
npm i plotly.js react-plotly.js<\/code>
dev dependencies:开发依赖:
npm i --save-dev @types\/plotly.js @types\/react-plotly.js<\/code>
Example Chart.tsx<\/strong> file:示例Chart.tsx<\/strong>文件:
import React from "react";
import Plotly from "plotly.js";
import createPlotlyComponent from "react-plotly.js/factory";
const Plot = createPlotlyComponent(Plotly);
export default function LineChart() {
const data = [
{
x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
mode: "lines",
},
];
const layout = { title: "Chart Title" };
return <Plot data={data} layout={layout} />;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.