在React中使用Plotly來構建動態圖表

語言: CN / TW / HK

你是否曾經想在你的React應用程式中建立和顯示圖形,或者你發現用你目前的庫很難做到這一點?如果是,這篇文章正是你所需要的:我們將探討Plotly以及如何在React應用程式中利用它。

Plotly是一個免費的開源資料視覺化框架,它提供了多種繪圖型別,如線形圖、散點圖、直方圖、考克斯圖等等。

通過使我們能夠無止境地定製我們的圖,我們可以使我們的圖與他人更相關,更容易理解。Plotly目前只適用於Python、R、Julia、Matlab、F#和Javascript應用程式。

前提條件

要學習本教程,你需要具備以下條件。

要安裝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元件中的資料道具。

Bar And Scatter Plot With Trace 1 As The Bar Chart And Trace 0 As The Line 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( ) }

```

在上面的程式碼中,我們建立了兩個柱狀圖圖譜 (plt1plot2),然後用相同的x 值將它們分組,並將兩個圖譜傳遞給Plot 元件的資料道具。通過這個方法,我們可以將兩個或多個柱狀圖分組。

然後,該程式碼輸出了下面的圖表。

Bar Chart Comparing Electronics Prices From 2016 To 2017

餅圖

餅圖比較了一個特定資料集或資料組的不同區域。我們的餅圖的例子將比較一個班級中學生最喜歡的顏色的選擇。

讓我們看看我們如何用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 ,分別包含了顏色、學生人數和圖表的型別。

Pie Chart Comparing Favorite Colors

面積圖

面積圖描述了一個或多個數量隨時間的演變,與線圖相當。在面積圖和折線圖中,資料點被繪製出來,然後由線段連線,以說明一個數量在不同時期的價值。

然而,面積圖與折線圖不同,因為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'} } />
)

}

```

程式碼的輸出如下。

Area Chart Showing Providers Vs. Vendors

表格

表格是以行和列的方式組織資訊,其單元格可以方便地進行比較和對比。要用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'} } />
)

}

```

通過為我們的支出表傳遞兩個標題和每個標題的一個列表,第一個列表的內容佔據了第一個標題下的單元格,第二個列表的內容佔據了第二個標題下的單元格。

然後,該程式碼輸出如下。

Table Showing Items And Prices

我們還可以對我們的表格進行樣式設計。

``` 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'} } />
)

}

```

Customized Table With Blue Header

用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 函式跟蹤所有資料點上的輸入變化,並更新圖中的資料,使散點圖變得動態。

下面是上述程式碼的輸出。

Dynamic line plot

用Plotly定製圖表

這裡我們將學習如何配置和定製我們的圖,以獲得更好的使用和體驗。

標註軸

要給繪圖的x軸和y軸貼上標籤,請使用佈局屬性中的xaxisyaxis 鍵,如下面的程式碼所示。

```

```

這樣做可以顯示出一個帶有 "音樂 "和 "銷售 "軸的圖。

Labeling Axis With "Music" And "Sales"

滾動到縮放

這個函式允許使用者縮放散點圖的圖表,使其更容易瀏覽資料。我們可以用它來檢查或獲得一個佈局的更詳細的視角。為了在我們的圖中實現滾動變焦,在config 屬性中設定scrollZoom

```

```

Scroll-To-Zoom Feature Zooming Into Dynamic Graph

新增圖例名稱

對於我們在一個圖上有兩個圖的情況,我們必須用圖例來標記它們。要做到這一點,在我們定義資料的地方設定它們的名稱屬性。讓我們看一個帶有散點圖和柱狀圖的圖形的例子。

```

```

在上面的程式碼中,我們為列表中的每個資料集設定一個名稱值。這樣做是為了給資料集新增標籤,並將它們顯示在圖的右側。

Adding Labels To Data Sets That Render In Graph Legend

總結

這篇文章教你如何用Plotly建立圖表、圖形和動態圖。你可以在這裡瞭解更多關於Plotly的官方文件。如果你有任何問題,不要猶豫,請在Twitter上聯絡我:@LordChuks3

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