HexoのGoogleChartプラグイン

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

1
npm install hexo-tag-googlecharts -- save

GoogleChartを読み込む

themes/tranquilpeak/layout/_partial/head.ejsに<script type="text/javascript" src="//www.google.com/jsapi"></script>を読み込むように追記する。

1
2
3
    <!-- Google Chart -->
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
</head>

チャートを描く

書き方

1
2
3
4
5
6
7
8
9
{% 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 %}
  • ChartTypeにはチャート名を記載
  • オプションはJSON形式で渡す
  • データはCSV形式で記述

Pie Chart

1
2
3
4
5
6
7
8
9
10
11
{% googlecharts PieChart 100% %}
Pie Chart
{}
'Task', 'Hours per Day'
'Work',              11
'Eat',                2
'Commute',            2
'Watch TV',           2
'Sleep',              7
{% endgooglecharts %}

Donut Charts

1
2
3
4
5
6
7
8
9
10
{% googlecharts PieChart 100% %}
Donut Charts
{"pieHole": 0.4}
'タスク', '時間'
'仕事',      11
'食事',       2
'通勤',       2
'テレビ',     2
'睡眠',       7
{% endgooglecharts %}

Table Charts

1
2
3
4
5
6
7
8
9
{% googlecharts Table 100% 100% %}
Table Charts
{"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 %}

Bar Charts

1
2
3
4
5
6
7
8
9
{% googlecharts BarChart 100% %}
Bar Charts
{}
'Element', 'Density',     { role: 'style' }
'Copper',       8.94,     '#b87333'
'Silver',      10.49,     'silver'
'Gold',        19.30,     'gold'
'Platinum',    21.45,     'color: #e5e4e2'
{% endgooglecharts %}

Goe Charts

1
2
3
4
5
6
7
8
9
10
11
{% googlecharts GeoChart 640 480 %}
GeoCharts
{}
'Country',          'Popularity'
'Germany',                   200
'United States',             300
'Brazil',                    400
'Canada',                    500
'France',                    600
'RU',                        700
{% endgooglecharts %}

Bubble Charts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% googlecharts BubbleChart 640 480 %}
Bubble Charts
{"hAxis": {"title": "Life Expectancy"}, "vAxis": {"title": "Fertility Rate"}, "bubble": {"textStyle": {"fontSize": 11}}}
'ID',     'Life Expectancy',  'Fertility Rate', 'Region',         'Population'
'CAN',    80.66,              1.67,             'North America',  33739900
'DEU',    79.84,              1.36,             'Europe',         81902307
'DNK',    78.6,               1.84,             'Europe',         5523095
'EGY',    72.73,              2.78,             'Middle East',    79716203
'GBR',    80.05,              2,                'Europe',         61801570
'IRN',    72.49,              1.7,              'Middle East',    73137148
'IRQ',    68.09,              4.77,             'Middle East',    31090763
'ISR',    81.55,              2.96,             'Middle East',    7485600
'RUS',    68.6,               1.54,             'Europe',         141850000
'USA',    78.09,              2.05,             'North America',  307007000
{% endgooglecharts %}