在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组件。

```

```

在下面的图片中，我们在图表中有两个不同的图：一个条形图和一个散点图。为了实现这一点，我们使用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( ) }

```

在上面的代码中，我们创建了两个柱状图图谱 (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 = [[" Item "], [" Expenditure "]]; 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 = [[" Item "], [" Expenditure "]]; 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 键，如下面的代码所示。

```

```

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

滚动到缩放

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

```

```

添加图例名称

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

```

```

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

总结

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

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