reactで線図を描きましょう.

さあ、今日は曲線図を描きます.目標は以下の通り.

前回発表したように、グラフを描いたことがないので、今日もゆっくり書いてみましょう.
上のグラフはreact-HigグラフライブラリからreactHighグラフをインポートして使用したようです.

// before version
import ReactHighcharts from 'react-highcharts'

しかしなぜか、react-hightchartsをダウンロードしようとしてもダウンロードしていないので、react公式提供のhighchartをロードするつもりです.

ダウンロード

npm i highcharts
npm i highcharts-react-official
2022年の私の最高バージョンは10.0.0で、最高バージョンは3.1.0です.

インポートとインポート

import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";

https://github.com/highcharts/highcharts-react動作を表すを通じて以下の内容を開発しましたので、参考にしてください!

コンポーネントの操作

さっき歌ったHighCartsReactを活用highcartsは上からインポートされ、classを指定したい場合はcontainerPropsを指定できます.またoptionsに情報を入れるとグラフにデータが含まれます.

<HighchartsReact
        containerProps={{ className: "home_body-chart" }}
        highcharts={Highcharts}
        options={options}
 />

私のオプションは上に設定されています.

  const options: Highcharts.Options = {
    title: {
      text: "",
    },
    series: [
      {
        type: "line",
        data: {{데이터}},
      },
    ],
  };

データバーにnumberからなる配列を入れればよい.
タイトルは必要ないので、タイトルのテキストを空の文字列で置き換えました.

しかし、主体がグラデーションであることを願って調べてみると、seriseの中でtypeを「area」に変える必要があることがわかりました.
ラベルがないことを願って、空いています.

title: {
      text: "",
    },
    xAxis: {
      categories: [],
    },
    yAxis: {
      min: 0,
      title: {
        text: "",
      },
    },

また、シェーディングを行うために、図面オプションで必要に応じてareaオプションを処理します.グラデーションは下のコードを入れて色を塗ることができます.

plotOptions: {
      area: {
        fillColor: {
          linearGradient: {
            x1: 0,
            y1: 0,
            x2: 0,
            y2: 1,
          }
      }
}

ツールチップは、適切なオプションにも配置できます.

tooltip: {
      enabled: true,
      headerFormat: "",
      pointFormat: "Total: 	{point.y:,.0f}",
    },

これにより、次のようなグラフが作成されます.

今日も先端開発者として一段階成長しました!