在React中使用Plotly来构建动态图表

你是否曾经想在你的React应用程序中建立和显示图形，或者你发现用你目前的库很难做到这一点？如果是，这篇文章正是你所需要的：我们将探讨Plotly以及如何在React应用程序中利用它。

Plotly是一个免费的开源数据可视化框架，它提供了多种绘图类型，如线形图、散点图、直方图、考克斯图等等。

通过使我们能够无止境地定制我们的图，我们可以使我们的图与他人更相关，更容易理解。Plotly目前只适用于Python、R、Julia、Matlab、F#和Javascript应用程序。

前提条件

要学习本教程，你需要具备以下条件。

• 对React的工作知识
• 对图表的工作原理有充分的了解
• 用于构建图表的Plotly库
• 用于创建数据字段的Chakra UI，以使我们的图表具有活力。

要安装Plotly和Chakra，请在你的终端运行以下命令。

npm install react-plotly.js plotly.js 
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Plotly如何工作

在Plotly中，用户将数据点和图形或图表的配置传递给Plot组件。

<Plot
      data={[        {          x: [1, 2, 3],
          y: [2, 6, 3],
          type: 'scatter',
          mode: 'lines+markers',
          marker: {color: 'red'},
        },
        {type: 'bar', x: [1, 2, 3], y: [2, 5, 3]},
      ]}
      layout={ {width: 320, height: 240, title: 'A Fancy Plot'} } />

在下面的图片中，我们在图表中有两个不同的图：一个条形图和一个散点图。为了实现这一点，我们使用JSON格式将这两个图以及它们的数据点和配置作为列表中的项目传递给Plot组件中的数据道具。

上面的例子是一个静态柱状图和散点图，我们把数据直接传给了道具。在本教程的后面，我们将看一下创建图形的更动态的方法。

Plotly图形和图表的不同类型

Plotly超越了简单的柱状图和散点图。我们将回顾我们可以用Plotly实现的其他图表以及如何在React中使用它们。

分组条形图

分组条形图比较了同一数据组的两个不同的数据点。让我们看看如何用Plotly来构建它。

const GroupedBarChart = (props) =>{
  var plot1 = {
  x: ["Microwave", "Washing Machine", "Tv", "Vacuum Cleaner", "Hair Dryer"],
  y: [4, 5, 6, 1, 4],
  name: "2016",
  type: "bar",
};

var plot2 = {
  x: ["Microwave", "Washing Machine", "Tv", "Vacuum Cleaner", "Hair Dryer"],
  y: [12, 3, 5, 6, 2],
  name: "2017",
  type: "bar",
};

var data = [plot1, plot2];
    return(
      <Plot
      data={data}
      layout={ {width: 500, height: 500, title: 'Electronics Prices 2016/2017'} } />
    )
}

在上面的代码中，我们创建了两个柱状图图谱 (plt1 和plot2)，然后用相同的x 值将它们分组，并将两个图谱传递给Plot 组件的数据道具。通过这个方法，我们可以将两个或多个柱状图分组。

然后，该代码输出了下面的图表。

饼图

饼图比较了一个特定数据集或数据组的不同区域。我们的饼图的例子将比较一个班级中学生最喜欢的颜色的选择。

让我们看看我们如何用Plotly来实现这一点。

const PieChart = (props) =>{
  var data = [
    {
      values: [112, 454, 65, 544],
      labels: ["Blue", "Red", "Yellow", "Orange"],
      type: "pie",
    },
  ];

    return(
      <Plot
      data={data}
      layout={ {width: 500, height: 500, title: 'Favourite Colours In A Class'} } />
    )
}

在上面的代码中，我们为图表传递了labels,values,type ，分别包含了颜色、学生人数和图表的类型。

面积图

面积图描述了一个或多个数量随时间的演变，与线图相当。在面积图和折线图中，数据点被绘制出来，然后由线段连接，以说明一个数量在不同时期的价值。

然而，面积图与折线图不同，因为X轴和折线之间的区域是用颜色或阴影填充的。

当我们想展示一个随时间变化的模式，但不关心提供准确的数值时，面积图是一个合适的选择。

要用Plotly建立一个面积图，我们只需要为散点图的填充属性添加一个值。在这个例子中，我们将建立一个区域图来寻找供应商和供应商之间的价格趋势。

const AreaChart = (props) =>{
  var data = [
    {
         x: [1, 2, 3, 4],
         y: [0, 2, 3, 5],
         fill: 'tozeroy',
         type: 'scatter',
         name: 'Vendor'
       },
       {
         x: [1, 2, 3, 4],
         y: [3, 5, 1, 7],
         fill: 'tonexty',
         type: 'scatter',
         name: 'Provider'
       }
  ];

    return(
      <Plot
      data={data}
      layout={ {width: 500, height: 500, title: 'Area Chart'} } />
    )
}

代码的输出如下。

表格

表格是以行和列的方式组织信息，其单元格可以方便地进行比较和对比。要用Plotly建立一个表格，我们必须传递标题和单元格的值，如下面的代码所示。

在这个例子中，我们将比较一些基本支出的费用。

const Table= (props) =>{
  const values = [
    ["Books", "Clothes", "Medicals"],
    ["$22", "$190", "$516"],
  ];
  const headers = [["<b> Item </b>"], ["<b> Expenditure </b>"]];
  const data = [
    {
      type: "table",
      header: {
        values: headers,
        align: "center",
      },
      cells: {
        values: values,
        align: "center",
      },
    },
  ];

    return(
      <Plot
      data={data}
      layout={ {width: 500, height: 500, title: 'Table'} } />
    )
}

通过为我们的支出表传递两个标题和每个标题的一个列表，第一个列表的内容占据了第一个标题下的单元格，第二个列表的内容占据了第二个标题下的单元格。

然后，该代码输出如下。

我们还可以对我们的表格进行样式设计。

const Table= (props) =>{
  const values = [
    ["Books", "Clothes", "Medicals"],
    ["$22", "$190", "$516"],
  ];
  const headers = [["<b> Item </b>"], ["<b> Expenditure </b>"]];
  const data = [
    {
      type: "table",
      header: {
        values: headers,
        align: "center",
        fill: { color: "#2849cc" },
        font: { color: "white", size: 20 },
      },
      cells: {
        values: values,
        align: "center",
        font: { family: "Ubuntu" },
      },
    },
  ];

    return(
      <Plot
      data={data}
      layout={ {width: 500, height: 500, title: 'Table'} } />
    )
}

用Plotly创建动态图表

现在我们已经学会了如何建立图形、图画和图表，让我们来学习如何使它们变得动态。要做到这一点，我们必须用React状态更新绘制的数据。让我们看看动态散点图的样子。

import Plot from 'react-plotly.js';
import React, { useState } from "react"
import { HStack,Input, Text } from "@chakra-ui/react"


const GraphCard = (props) =>{

  const [ scatter, setScatter ] = useState(
    {
          x: [1,2,3],
          y: [2,5,3],
          type: 'scatter',
          mode: 'lines+markers',
          marker: {color: 'red'},
        }
  );
  const [ data, setData ] = useState([scatter]);

  const handleChange = (i,j,e) => {
    const newScatter = {...scatter};
    newScatter\[i\][j]=parseInt(e.target.value);
    setScatter(newScatter);
    setData([scatter]);
  }



    return(
      <>
      <Plot data={[{
            x: \[data[0\]["x"]\[0],data[0\]["x"]\[1],data[0\]["x"][2]],
            y: \[data[0\]["y"]\[0],data[0\]["y"]\[1],data[0\]["y"][2]],
            type: 'scatter',
            mode: 'lines+markers',
            marker: {color: 'red'},
          }]} layout={ {width: 500, height: 500, title: 'A Dynamic Fancy Plot'} } />
    <HStack align="center" marginTop="2rem" padding="2rem">
      <Text fontSize="md">X1</Text>
      <Input type="number" placeholder={data\[0\]["x"][0]} onChange={(e) => handleChange("x",0,e)}/>
      <Text fontSize="md">X2</Text>
      <Input type="number" placeholder={data\[0\]["x"][1]} onChange={(e) => handleChange("x",1,e)}/>
      <Text fontSize="md">X3</Text>
      <Input type="number" placeholder={data\[0\]["x"][2]} onChange={(e) => handleChange("x",2,e)}/>
      <Text fontSize="md">Y1</Text>
      <Input type="number" placeholder={data\[0\]["y"][0]} onChange={(e) => handleChange("y",0,e)}/>
      <Text fontSize="md">Y2</Text>
      <Input type="number" placeholder={data\[0\]["x"][1]} onChange={(e) => handleChange("y",1,e)}/>
      <Text fontSize="md">Y3</Text>
      <Input type="number" placeholder={data\[0\]["x"][2]} onChange={(e) => handleChange("y",2,e)}/>
    </HStack>
      </>
    )
}

export default GraphCard;

在上面的代码中，我们使用Chakra UI库构建了我们的用户界面，在一个scatter 状态中定义了我们的散点图数据，并将其包装在一个data 列表状态中。

通过创建一个handleChange 函数并将其附加到我们的 Chakra 输入的onChange 事件上，handleChange 函数跟踪所有数据点上的输入变化，并更新图中的数据，使散点图变得动态。

下面是上述代码的输出。

用Plotly定制图表

这里我们将学习如何配置和定制我们的图，以获得更好的使用和体验。

标注轴

要给绘图的x轴和y轴贴上标签，请使用布局属性中的xaxis 和yaxis 键，如下面的代码所示。

<Plot data={data} layout={ {width: 500, height: 500, title: 'A Dynamic Fancy Plot', xaxis:{title:"Music"}, yaxis:{title:"Sales"}} } />

这样做可以显示出一个带有 "音乐 "和 "销售 "轴的图。

滚动到缩放

这个函数允许用户缩放散点图的图表，使其更容易浏览数据。我们可以用它来检查或获得一个布局的更详细的视角。为了在我们的图中实现滚动变焦，在config 属性中设置scrollZoom 。

<Plot data={data} layout={ {width: 500, height: 500, title: 'A Dynamic Fancy Plot', xaxis:{title:"Music"}, yaxis:{title:"Sales"}}} config={{scrollZoom:true}}/>

添加图例名称

对于我们在一个图上有两个图的情况，我们必须用图例来标记它们。要做到这一点，在我们定义数据的地方设置它们的名称属性。让我们看一个带有散点图和柱状图的图形的例子。

<Plot
      data={[
        {
          x: [1, 2, 3],
          y: [2, 6, 3],
          type: 'scatter',
          mode: 'lines+markers',
          marker: {color: 'red'},
name: "scatterplot"
        },
        {type: 'bar', x: [1, 2, 3], y: [2, 5, 3], name:"bar chart},
      ]}
      layout={ {width: 500, height: 500, title: 'A Fancy Plot'} } />

在上面的代码中，我们为列表中的每个数据集设置一个名称值。这样做是为了给数据集添加标签，并将它们显示在图的右侧。

总结

这篇文章教你如何用Plotly建立图表、图形和动态图。你可以在这里了解更多关于Plotly的官方文档。如果你有任何问题，不要犹豫，请在Twitter上联系我：@LordChuks3。

The postUsing Plotly in React to build dynamic charts and graphsappeared first onLogRocket Blog.