React Highcharts 的實用小技巧分享

我手頭的案子基本上每個都是用 highcharts 圖表呈現數據,所以對 highcharts 的使用方式有了一定的了解。這篇文章會整理一些我在使用上遇過的需求和最終的寫法,一方面是提供自己以後作為參考,一方面則是希望能解決和我有遇到相同需求的朋友們的問題。

時區轉換

highcharts 有提供一個 API timezoneOffset:時區偏移量(以分鐘為單位),正為西;負為東,默認為 0

所以如果需要轉為台北時間,需要 +8,也就是 -8 * 60 分鐘:

const options = {
   time: {
      timezoneOffset: -8 * 60,
   },
   // ...
}

這樣寫的話時區才會 +8。

不顯示圖表標題

如果不需要顯示圖表標題的話,直接將 title.text 設為 undefined 即可:

title: {
   text: undefined,
},

圖表寬高

chart.width 可修改圖表寬度;chart.height 可修改圖表高度。

如果給的是數字,則高度以 px 為單位。如果給定一個百分比(ex: 56%),則高度為實際圖表寬度的百分比

chart: {
   width: 600,
   height: "70%",
},

增加圖表四周間距

有些時候我們會希望圖表跟周圍區塊有點距離,比如我們的圖表沒有標題時,整個圖表就會往上跑,所以可以在 chart 裡面加上一個 spacingTop API,讓圖表跟上方拉開距離:

chart: {
   spacingTop: 40,
   spacingRight: 30,
   spacingLeft: 20,
}

spacingTop:The space between the top edge of the chart and the content (plot area, axis title and labels, title, subtitle or legend in top position).

除了 top 之外還有 spacingRight、spacingLeft、spacingBottom 可以調整,如果不想單獨設置,也可以直接使用 spacing,預設值為 [10, 10, 15, 10]

折線圖線段樣式

plotOptions.series 底下可以設置線段的顏色(color)和寬度(lineWidth):

plotOptions: {
   series: {
     color: "orange",
     lineWidth: 3,
     // ...
   },
},
highcharts linewidth

x 軸顯示近八小時時間

我還滿常遇到的需求是:x 軸從當前時間前八小時間隔一小時至當前時間,這時候就可以在 tickPositioner 用迴圈遍歷往後加一小時:

xAxis: {
  type: "datetime",
  min: dayjs().subtract(7, "hours").valueOf(),
  max: dayjs().valueOf(),
  endOnTick: true,
  tickPositioner: function () {
     const positions = [];
     for (let i = 0; i < 8; i++) {
        positions.push(
          dayjs(this.min)
            .add(60 * i, "minutes")
            .valueOf()
        );
     }
     return positions;
 },
 labels: {
    format: "{value:%H:%M}",
 },
},

Tooltip 樣式

  • useHTML API 為 true 就可以用 html 呈現在 tooltip 裡面的內容。
  • xDateFormat 如果 X 軸是時間類型,則可以自定義 tooltip 標題的日期如何呈現,可以寫 html。
    • %Y-%m-%d %H:%M2022-07-15 21:08
  • style.fontSize 可以修改 tooltip 內容的文字大小。 (標題需要在 xDateFormat 中用 html 來改)
tooltip: {
   useHTML: true,
   xDateFormat: '<span style="font-size: 1vw">%Y-%m-%d %H:%M</span>',
   style: {
     fontSize: "1.2vw",
   },
},
highcharts tooltip style

marker 大小

統一所有線段的 marker 大小

如果是統一修改所有線段的 marker 大小,可以在 plotOptions.series.marker 裡面修改 radius 的值:

plotOptions: {
   series: {
     marker: {
       radius: 5
     }
   },
},

設置單獨線段的 marker

在 series 裡面修改 marker.radius 就可以更改指定 series 的 marker 大小:

series: [
   {
     name: "test",
     data: chartData,
     marker: {
       radius: 8
     },
   },
],
highcharts marker radius

自定義 marker 圖案

如果需要自定義 marker 圖案可以使用 symbol: 'url(圖片地址)',寬高就是 width, height:

series: [
   {
     name: "test",
     data: chartData,
     marker: {
       symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
       width: 16,
       height: 16
     },
   },
],
image 29 React Highcharts 的實用小技巧分享

添加圖表輔助線

yAxis.plotLines 可以在 y 軸顯示輔助線,值為 array:

  • color:輔助線顏色
  • dashStyle:分為 solid, dash, longdash,線段的樣式
  • value:輔助線的值
  • width:輔助線的寬度
yAxis: {
    // ...
    plotLines: [
    {
      color: '#E31A1C',
      dashStyle: 'dash',
      value: 600,
      width: 4,
    },
    {
      color: '#1F78B4',
      dashStyle: 'dash',
      value: 100,
      width: 4,
    },
  ]
},

提升圖表性能

這部分我之前的文章中有提到過,這邊就不重提了,有興趣可以看一下↓

文中提到的所有內容我都放在 stackblitz 中,有需要可以參考:https://stackblitz.com/edit/react-e8emer?file=src/components/Chart.js

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論