React.js 制作了一个自定义折线图

问题描述

我想做一个像这张图片这样的折线图。 我检查了chart.js。但似乎用户界面无法像附加图像那样做。 有什么办法可以做出这个设计吗？我需要通过我的onw通过svg绘制吗？ 谢谢！

解决方法

这是使用 React 渲染的 SVG 的简单示例：

const MyChart = ({points}) => {
  const lines = points.reduce((result,point,index) => {
    if (index === 0) return [];
    const previous = points[index - 1];
    const line = {x1: previous.x,y1: previous.y,x2: point.x,y2: point.y};
    return [...result,line];
  },[]);

  return (
    <svg width="200" height="200">
      
      {lines.map(({x1,x2,y1,y2}) => 
        <line x1={x1} x2={x2} y1={y1} y2={y2} stroke="blue" strokeWidth="2" />)
      }
      
      {points.map(({x,y}) => 
        <circle cx={x} cy={y} r="5" fill="red" />)
      }
    </svg>
  );
}


const data = [
  {x: 20,y: 100},{x: 50,y: 80},{x: 80,y: 50}
];

ReactDOM.render(<MyChart points={data} />,document.querySelector("#container"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container"></div>