用React刻自己的投资Dashboard Day4 - highcharts制作线图

tags: `2021铁人赛` `React`

Javascript绘图套件

在搜寻chart library的时候，发现JS可以用的library很多，包含 D3.js / highcharts / Google Charts / Chart.js / chartist.js / recharts / n3-charts / Plotly.js / canvasJS，研究一下发现highcharts的网站有Stock chart的demo，算是蛮好入手开始研究的，就先从这个套件开始学习。

资料来源

投资数据的其中一个项目是总体经济的数据，透过观察总体经济数据可以知道目前的经济状况相对於历史纪录是在什麽样的位阶，因此第一个图表使用美国FRED提供的消费者物价指数来绘图。

FRED其实有提供API可以直接串接资料，不过为了循序渐进，我这边会先将资料存成静态档案，先以highcharts套件的应用为主，画好图之後，再来讨论API的串接以及资料的更新。

静态资料放置位置在Charts components内，这边就是先暂存，稍後串接API後就会删除掉，先以JSON的方式存档。

dummyData.json

{
  "TREAST": {
    "title": "联准会持有美债金额",
    "document": "The total face value of U.S. Treasury securities held by the Federal Reserve. This total is broken out in the lines below. Purchases or sales of U.S. Treasury securities by the Federal Reserve Bank of New York (FRBNY) are made in the secondary market, or with various foreign official and international organizations that maintain accounts at the Federal Reserve. FRBNY's purchases or sales in the secondary market are conducted only through primary dealers.",
    "source": "FRED",
    "units": "百万美元",
    "latest_released_date": "2021-08-06",
    "next_updated_date": "2021-08-13",
    "frequency": "weekly",
    "data": {
      "realtime_start": "2021-08-10",
      "realtime_end": "2021-08-10",
      "observation_start": "2021-01-01",
      "observation_end": "2021-08-10",
      "units": "lin",
      "output_type": 1,
      "file_type": "json",
      "order_by": "observation_date",
      "sort_order": "asc",
      "count": 31,
      "offset": 0,
      "limit": 100000,
      "observations": [
        {
          "realtime_start": "2021-08-10",
          "realtime_end": "2021-08-10",
          "date": "2021-01-06",
          "value": "4699421.0"
        },
        {
          "realtime_start": "2021-08-10",
          "realtime_end": "2021-08-10",
          "date": "2021-01-13",
          "value": "4723733.0"
        },
        {
          "realtime_start": "2021-08-10",
          "realtime_end": "2021-08-10",
          "date": "2021-01-20",
          "value": "4743552.0"
        },
        ...
      ]
    }
  }
}

The official Highcharts supported wrapper for React

Highcharts官方有专门针对React设计一个wrapper，叫做highcharts-react，让开发者可以很轻松import套件开始制图。只要三个步骤就可以绘图完成

照着官方的说明进行安装

npm install highcharts highcharts-react-official

在React元件内汇入套件

import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';

将资料导入并设定好options即可绘出图形，完整程序码如下

Charts.js

import React from 'react';
import styles from './Chart.module.css';
import { Row, Col } from 'react-bootstrap';
// highcharts react components
import Highcharts from 'highcharts/highstock';
import HighchartsReact from 'highcharts-react-official';
// dummy data
import dummyData from './dummyData.json';

// get information of chart
const chartElementInfo = () => {
  // chart data
  const chartData = [];
  dummyData.TREAST.data.observations.forEach(ob => {
    chartData.push([new Date(ob.date).getTime(), Number(ob.value)]);
  });

  return {
    document: dummyData.TREAST.document,
    source: dummyData.TREAST.source,
    updated: dummyData.TREAST.latest_released_date,
    options: {
      title: {
        text: dummyData.TREAST.title
      },
      series: [
        {
          name: dummyData.TREAST.title,
          data: chartData
        }
      ],
      xAxis: {
        type: "datetime",
        title: {
          text: 'Date'
        }
      }
    }
  }
};

const Charts = () => {
  return (
    <Row className={styles.charts}>
      <Col sm={12} md={6} lg={4} className={styles.chartItem}>
        <HighchartsReact
          highcharts={Highcharts}
          constructorType={'stockChart'}
          options={chartElementInfo().options}
        />
        <div className={styles.chartInfo}>
          <p className={styles.source}>source: {chartElementInfo.source}</p>
          <p className={styles.date}>updated: {chartElementInfo.updated}</p>
        </div>
        <div>
          <p className={styles.document}>{chartElementInfo.document}</p>
        </div>
      </Col>
    </Row>
  )
};

export default Charts;