问题描述
我正在为我的一个项目使用 react-vis 库。我从网站上的一个示例中复制了示例图表的源代码。我直接复制了这个例子,但图表仍然没有像预期的那样。
import React from 'react';
import {curveCatmullRom} from 'd3-shape';
import {
XYPlot,XAxis,YAxis,HorizontalGridLines,VerticalGridLines,Lineseries
} from 'index';
export default function Example(props) {
return (
<XYPlot width={300} height={300}>
<HorizontalGridLines style={{stroke: '#B7E9ED'}} />
<VerticalGridLines style={{stroke: '#B7E9ED'}} />
<XAxis
title="X Axis"
style={{
line: {stroke: '#ADDDE1'},ticks: {stroke: '#ADDDE1'},text: {stroke: 'none',fill: '#6b6b76',fontWeight: 600}
}}
/>
<YAxis title="Y Axis" />
<Lineseries
className="first-series"
data={[{x: 1,y: 3},{x: 2,y: 5},{x: 3,y: 15},{x: 4,y: 12}]}
style={{
strokeLinejoin: 'round',strokeWidth: 4
}}
/>
<Lineseries className="second-series" data={null} />
<Lineseries
className="third-series"
curve={'curveMonotoneX'}
data={[{x: 1,y: 10},y: 4},y: 2},y: 15}]}
strokeDasharray="7,3"
/>
<Lineseries
className="fourth-series"
curve={curveCatmullRom.alpha(0.5)}
data={[{x: 1,y: 7},y: 11},y: 9},y: 2}]}
/>
</XYPlot>
);
}
解决方法
对于此问题,您可以在组件中从 style.css
导入 react-vis
,如下所示,
import "react-vis/dist/style.css";
工作代码:- https://codesandbox.io/s/musing-yonath-bgg1i?file=/src/App.js