https://github.com/juampi92/hexo-tag-googlecharts
https://developers.google.com/chart/interactive/docs/gallery
hexo-tag-googlecharts を使ってチャートを表示してみました。

Google Charts を直接Javascript から使うよりも簡単に利用できて便利です。
カスタマイズに少しコツが必要なのでよく使う構成をテンプレートとして作っておくとよさそうです。

環境設定

利用環境

  • hexo 3.8.0
  • hexo-tag-googlecharts 1.0.2

Google JS API の取り込み

私はfreemind テーマを使っていますので以下のファイルに追記しました。

themes/freemind/layout/_partial/head.ejs
<script type="text/javascript" src="//www.google.com/jsapi"></script>

hexo-tag-googlecharts のインストール

$ npm install hexo-tag-googlecharts --save

Hexo Tag Google Charts の使い方

{% googlecharts ChartType [width [height]] %}
Title for the Graph
{ "customOptions": true }
'Column1', 'Column2', 'Column3'
1000, 28, 5
5000, 71, 19
10000, 143, 37
20000, 282, 68
{% endgooglecharts %}

1. 開始行

{% googlecharts ChartType [width [height]] %}
  • ChartType: デフォルトはTable
  • ChartType の一覧
    https://developers.google.com/chart/interactive/docs/gallery
  • Google Charts のJavascript コードが以下の場合、hexo-tag-googlecharts のChartType はLineChart
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  • width: デフォルトは800
  • height: デフォルトは600
  • width, height にはauto、100%のような表現も指定できそう

2. タイトル行

Title for the Graph
  • 題名を指定
  • Table の場合、表示されない場合もあるかも
  • 必須。 (スペース)でもよい。

3. オプション行

{ "customOptions": true }

4. データ行

'Column1', 'Column2', 'Column3'
1000, 28, 5
5000, 71, 19
10000, 143, 37
20000, 282, 68
  • 日付指定はnew Date('2019/06/26')等で。

5. 終了行

{% endgooglecharts %}

Hexo Tag Google Charts の利用例

https://developers.google.com/chart/interactive/docs/gallery
Chart Gallery の中でよく使いそうな例を移植してみました。

表(Table)

https://developers.google.com/chart/interactive/docs/gallery/table

{% googlecharts Table 100% 100% %}
 
{"showRowNumber": true}
'Name', 'Salary', 'Full Time Employee'
'Mike',  {v: 10000, f: '$10,000'}, true
'Jim',   {v:8000,   f: '$8,000'},  false
'Alice', {v: 12500, f: '$12,500'}, true
'Bob',   {v: 7000,  f: '$7,000'},  true
{% endgooglecharts %}

複合グラフ(ComboChart)

https://developers.google.com/chart/interactive/docs/gallery/combochart

{% googlecharts ComboChart 900 500 %}
Monthly Coffee Production by Country
{"vAxis": {"title": "Cups"}, "hAxis": {"title": "Month"}, "seriesType": "bars", "series": [{}, {}, {}, {}, {"type": "line"}]}
'Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Average'
'2004/05',  165,      938,         522,             998,           450,      614.6
'2005/06',  135,      1120,        599,             1268,          288,      682
'2006/07',  157,      1167,        587,             807,           397,      623
'2007/08',  139,      1110,        615,             968,           215,      609.4
'2008/09',  136,      691,         629,             1026,          366,      569.6
{% endgooglecharts %}

円グラフ(PieChart)

https://developers.google.com/chart/interactive/docs/gallery/piechart

{% googlecharts PieChart 100% %}
My Daily Activities
{"is3D": true}
'Task', 'Hours per Day'
'Work',     11
'Eat',      2
'Commute',  2
'Watch TV', 2
'Sleep',    7
{% endgooglecharts %}

地図(GeoChart)

https://developers.google.com/chart/interactive/docs/gallery/geochart

{% googlecharts GeoChart 900 500 %}
 
{}
'Country', 'Popularity'
'Germany', 200
'United States', 300
'Brazil', 400
'Canada', 500
'France', 600
'RU', 700
{% endgooglecharts %}

気づき事項

  • Javascript を書かなくてよいので楽ちん
  • 折れ線グラフの0から始まらない軸の補助線のカスタマイズは難しい
  • 系統毎のオプションを指定するseries オプションは、インデックスを指定しての設定ではなく、配列に展開して設定した方がよいかもしれない