動的グラフとグラフを構築するには、反応のプロットを使用する

執筆Ochuko Onojakpor ✏️
あなたはあなたの反応のアプリケーションでグラフを構築し、表示したいことがありますか、またはあなたの現在のライブラリでそうするのは難しい見つけるか?はい、この記事はちょうどあなたが必要なものです:私たちは、プロットを探索し、どのように我々は反応アプリケーションで利用することができます.
プロットは、ライングラフ、散布プロット、ヒストグラム、COXプロットなどのプロットの種類の様々なを提供して自由かつオープンソースのデータ可視化フレームワークです.
私たちは無限に私たちのグラフをカスタマイズすることを可能にすることによって、私たちは私たちのプロットをより関連性と他の人にわかりやすくすることができます.現在、Python、R、ジュリア、MATLAB、F - CHERY、およびJavaScriptアプリケーションでのみ使用可能です.

必要条件
このチュートリアルに従うには、次の手順を実行します.

反応の知識

グラフ作業の良い理解

グラフをビルドするためのプロットライブラリ

Chakra UI to create the data fields 我々のチャートをダイナミックにするために

プロットとチャクラをインストールするには、以下のコマンドを端末で実行します.

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

どのように
プロットでは、グラフまたはグラフのデータポイントと構成をプロットコンポーネントに渡します.

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

以下のイメージでは、チャートに2つの異なるプロットがあります.これを達成するために、JSON形式を使用して、プロットのコンポーネント内のデータプロップにリスト内の項目としてのデータポイントと構成を2つのプロットに渡します.

上の例は静的な棒グラフと散布図で、データを直接小道具に渡しました.後でこのチュートリアルでは、グラフを作成するためのより動的なアプローチを見ていきます.

グラフとグラフの異なるタイプ
単純に単純な棒グラフと散布プロットを超えて行く.我々は、我々はプロットを実行することができます他のグラフを参照してくださいhow to use them in React .

グループ棒グラフ
グループ化された棒グラフは、同じデータグループの2つの異なるデータポイントを比較します.どうやってそれをきちんとビルドするかを見ましょう.

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

上のコードでは、2つの棒グラフプロットを作成しましたplt1 and plot2 ), そして、それを用いてグループ化したx の値を返します.Plot コンポーネント.この方法では、2つ以上の棒グラフをグループ化できます.
次に、次のグラフを出力します.


円グラフ
円グラフは、特定のデータセットまたはデータグループの異なる領域を比較します.円グラフの我々の例は、クラスの学生の好みの色の選択を比較します.
どうやってこれをうまく実行できるかを見てみましょう.

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 , and type それぞれのグラフには、色、生徒数、グラフの種類が含まれます.


エリアチャート
領域図は、時間とともに1つ以上の量の進化を表して、線グラフに匹敵する.データポイントはプロットされて、それからさまざまな期間の量の値を例証するために両方の領域チャートおよびライングラフのライン・セグメントによって、結合した.
しかし、X線と線の間の領域が色または陰影で満たされるので、線グラフは線グラフから異なります.
我々は時間をかけてパターンをデモしたいが、正確な値を提供することに関心がない場合は、エリアグラフは適切な代替手段です.
プロットをプロットするには、プロットのFillプロパティの値を追加する必要があります.この例では、プロバイダとベンダー間の価格トレンドを見つけるために、エリアグラフを構築します.

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

コードの出力は以下の通りです.


テーブル
表は、簡単に比較と対照を許すセルと行と列の情報の組織です.厳密にテーブルを構築するには、以下のコードに示すように、ヘッダーとセルの値を渡す必要があります.
この例では、いくつかの重要な支出のコストを比較します.

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

各々のヘッダのための2つのヘッダおよびリストのためのリストを通過することによって、第1のリストの内容は第1のヘッダの下でセルを占める.そして、第2のリストの内容は第2のヘッダの下でセルを占める.
次に、次のコードが出力されます.

テーブルのスタイルもできます.

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

動的グラフを作成する
今、我々はグラフ、プロット、およびグラフを構築する方法を学んだ今、それらを動的にする方法を学びましょう.これを行うには、反応状態をプロットしたデータを更新する必要があります.ダイナミックな散布図がどのように見えるか見ましょう:

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;

上のコードでは、我々のユーザーインターフェイスを使用してチャクラUIライブラリを使用して、我々の散乱プロットのデータを定義scatter 状態にして、data リストステート.
を作成することによってhandleChange 関数とonChange 我々のチャクラ入力のイベントhandleChange 関数は、すべてのデータポイントの入力に変更を追跡し、プロットのデータを更新し、散布図を動的にします.
以下は上記のコードの出力です.


グラフをカスタマイズする
ここでどのように設定し、より良い使用と経験のためのプロットをカスタマイズする方法を学びます.

ラベル軸
プロットのx軸とy軸をラベルするにはxaxis and yaxis 次のコードで見られるレイアウトプロパティのキー

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

これを行うと、“音楽”と“販売”軸でプロットをレンダリングします.


スクロールするズーム
この関数は、ユーザーがデータを参照しやすくすること、散乱のプロットのプロットをズームすることができます.我々は、レイアウトのより詳細な視点をチェックするか、得るためにそれを使うかもしれません.スクロールを実行するにはscrollZoom にconfig プロパティー

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

凡例名の追加
つのグラフに2つのプロットがある状況のために、我々は伝説で彼らをラベルしなければなりません.これを行うには、名前のプロパティを設定してデータを定義します.散布図と棒グラフのグラフの例を見てみましょう.

<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 in their official documentation here . 質問がある場合は、Twitterで私に連絡することを躊躇しないでください.

フル可視性の生産反応アプリ
ユーザーが再生するのが難しい問題を経験するとき、特に反応する反応アプリケーションは難しくありえます.あなたがRedux状態をモニターして、追跡することに興味があるならば、自動的にJavaScript誤りを浮上させて、遅いネットワーク要求と成分負荷時間を追跡してください.try LogRocket .

LogRocket ウェブアプリのDVRのような、文字通りあなたの反応アプリで起こるすべてを記録します.問題が発生した理由を推測する代わりに、問題が発生したときにアプリケーションがどのような状態になったかを集計およびレポートできます.また、クライアントのCPU負荷、クライアントのメモリ使用量などのメトリクスを報告し、あなたのアプリケーションのパフォーマンスを監視します.
LogRoot Reduxのミドルウェアのパッケージは、ユーザーセッションに可視性の余分な層を追加します.LogLogelはあなたのredux店からすべてのアクションと状態を記録します.
近代化する方法あなたの反応アプリをデバッグするstart monitoring for free .