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 %}

Pie ChartWorkEatCommuteWatch TVSleep45.8%29.2%8.3%8.3%8.3%
TaskHours per Day
Work11
Eat2
Commute2
Watch TV2
Sleep7

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 %}
Donut Charts仕事食事通勤テレビ睡眠45.8%29.2%8.3%8.3%8.3%
タスク時間
仕事11
食事2
通勤2
テレビ2
睡眠7

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 %}
 NameSalaryFull Time Employee
1Mike$10,000
2Jim$8,000
3Alice$12,500
4Bob$7,000

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 %}
Bar ChartsDensity0510152025CopperSilverGoldPlatinum
ElementDensity
Copper8.94
Silver10.49
Gold19.3
Platinum21.45

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 %}
200700

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 %}
Bubble ChartsNorth AmericaEuropeMiddle EastUSARUSDEUEGYIRNGBRIRQ6570758085012345Life ExpectancyFertility Rate
IDLife ExpectancyFertility RateRegionPopulation
CAN80.661.67North America33,739,900
DEU79.841.36Europe81,902,307
DNK78.61.84Europe5,523,095
EGY72.732.78Middle East79,716,203
GBR80.052Europe61,801,570
IRN72.491.7Middle East73,137,148
IRQ68.094.77Middle East31,090,763
ISR81.552.96Middle East7,485,600
RUS68.61.54Europe141,850,000
USA78.092.05North America307,007,000