javascript - 在 React 中创建图形

Question

我很难理解如何在 React 中创建图形(这是我第一次使用它)

谁能帮我分享一下你使用的是哪个库，你会如何使用它来绘制 3 个数据集，这在单个图中看起来像这样

这就是我的数据集的样子。

(3) [{…}, {…}, {…}]
0:{id: "SAMPLE_#SPMJXVC_1_2", x: Array(963), y: Array(963)}
1: {id: "SAMPLE_#SPMJXVC_1_3", x: Array(964), y: Array(964)}
2: {id: "SAMPLE_#SPMJXVC_1_1", x: Array(954), y: Array(954)}

Answer 1

Chart.js 是一个非常流行的用于创建 Javascript 图表的库。

有一个包装器可以使 Chart.js 在 React 中易于使用:https://github.com/jerairrest/react-chartjs-2

如果你不想使用它，你可以阅读这篇文章以获得更多想法: https://www.overloop.io/blog/2018/6/19/top-5-react-chart-libraries

如果您决定使用此 react-chartjs-2然后在 React 中安装包，然后按照他们的 github 中的说明进行操作。对于散点图，您必须设置 data对象，然后简单地渲染 <Scatter data={data} />

这是我从他们的网站上获取的完整示例:

import React from 'react';
import {Scatter} from 'react-chartjs-2';

const data = {
  labels: ['Scatter'],
  datasets: [
    {
      label: 'My First dataset',
      fill: false,
      backgroundColor: 'rgba(75,192,192,0.4)',
      pointBorderColor: 'rgba(75,192,192,1)',
      pointBackgroundColor: '#fff',
      pointBorderWidth: 1,
      pointHoverRadius: 5,
      pointHoverBackgroundColor: 'rgba(75,192,192,1)',
      pointHoverBorderColor: 'rgba(220,220,220,1)',
      pointHoverBorderWidth: 2,
      pointRadius: 1,
      pointHitRadius: 10,
      data: [
        { x: 65, y: 75 },
        { x: 59, y: 49 },
        { x: 80, y: 90 },
        { x: 81, y: 29 },
        { x: 56, y: 36 },
        { x: 55, y: 25 },
        { x: 40, y: 18 },
      ]
    }
  ]
};

export default React.createClass({
  displayName: 'ScatterExample',

  render() {
    return (
      <div>
        <h2>Scatter Example</h2>
        <Scatter data={data} />
      </div>
    );
  }
});