生成反应图

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包，那么您可以安装这个包，然后按照他们的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>
    );
  }
});