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

如果您决定使用此data软件包，则在React中安装该软件包，然后按照其github中的说明进行操作。对于散点图，您必须设置<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> ); } });

这是我从他们的网站上摘下来的完整示例：

  global $woocommerce;
  if ( WC()->cart->get_cart_contents_count() != 0 ) {
     // other codes here
  }

在React中创建图

1 个答案: