Hexo 에서 구글 차트 사용하는 방법

Posted on 2021-04-19 Edited on 2022-09-29 In hexo Word count in article: 1.2k Reading time ≈ 5 mins.

Hexo 에서 Google charts 를 사용하기 위해서 Hexo-tag-googlecharts 가 있었는데
사용해보니 google charts 의 예전버전을 기준으로 만들어 져서 최신버전 google charts 를 사용하기 위해서 hexo-tag-gcharts 를 만들었다.

Hexo 에서 사용가능한 차트 리스트

chartjs
echarts
googlecharts

install

1	$ npm install hexo-tag-gcharts --save

Usage

{% gcharts [packageName] [chartType] [width] [height] %}
\\google charts datas goes here
options
\\google charts options goes here
{% endgcharts %}

Name	Type	Default	Description
packageName	string	corechart	The name of google chart packages
chartType	string	Bar	The type of google chart
width	string	85%	The width of chart, responsive in window.
height	string	300px	The height of chart (px)

Example

Area Chart

{% gcharts corechart AreaChart 90% 400px %}
[
  ['Year', 'Sales', 'Expenses'],
  ['2013',  1000,      400],
  ['2014',  1170,      460],
  ['2015',  660,       1120],
  ['2016',  1030,      540]
]
options
{
  title: 'Company Performance',
  hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
  vAxis: {minValue: 0}
}
{% endgcharts %}

Bar Chart

{% gcharts corechart BarChart 90% 400px %}
[
  ["Element", "Density", { role: "style" } ],
  ["Copper", 8.94, "#b87333"],
  ["Silver", 10.49, "silver"],
  ["Gold", 19.30, "gold"],
  ["Platinum", 21.45, "color: #e5e4e2"]
]
options
{
  title: "Density of Precious Metals, in g/cm^3",
  width: 600,
  height: 400,
  bar: {groupWidth: "95%"},
  legend: { position: "none" },
}
{% endgcharts %}

Bubble Chart

{% gcharts corechart BubbleChart 90% 400px %}
[
  ['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]
]
options
{
  title: 'Correlation between life expectancy, fertility rate ' +
          'and population of some world countries (2010)',
  hAxis: {title: 'Life Expectancy'},
  vAxis: {title: 'Fertility Rate'},
  bubble: {textStyle: {fontSize: 11}}
}
{% endgcharts %}

Calendar Chart

{% gcharts calendar Calendar 90% 400px %}
[
  [{
      label: 'Date',
      id: 'date',
      type: 'date'
    },
    {
      label: 'Wonloss',
      id: 'won/loss',
      type: 'number'
    }
  ],
  [new Date(2012, 3, 13), 37032],
  [new Date(2012, 3, 14), 38024],
  [new Date(2012, 3, 15), 38024],
  [new Date(2012, 3, 16), 38108],
  [new Date(2012, 3, 17), 38229],
], false
options
{
  title: "Red Sox Attendance",
  height: 350,
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: '#1a8763',
      bold: true,
      italic: true,
    },
    dayOfWeekRightSpace: 10,
    daysOfWeek: 'DLMMJVS',
  }
}
{% endgcharts %}

Combo Chart

{% gcharts corechart ComboChart 90% 400px %}
[
  ['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]
]
options
{
  title : 'Monthly Coffee Production by Country',
  vAxis: {title: 'Cups'},
  hAxis: {title: 'Month'},
  seriesType: 'bars',
  series: {5: {type: 'line'}}
}
{% endgcharts %}

Gantt Charts

{% gcharts gantt Gantt 90% 400px %}
[
  [
    {label:'Task ID',id:'taskid',type:'string'},
    {label:'Task Name',id:'taskname',type:'string'},
    {label:'Resource',id:'resource',type:'string'},
    {label:'Start Date',id:'startdate',type:'date'},
    {label:'End Date',id:'enddate',type:'date'},
    {label:'Duration',id:'duration',type:'number'},
    {label:'Percent Complete',id:'percent',type:'number'},
    {label:'Dependencies',id:'dependencies',type:'string'},
  ],
  ['Research', 'Find sources', null,
    new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
  ['Write', 'Write paper', 'write',
    null, new Date(2015, 0, 9), 3 *24*60*60*1000, 25, 'Research,Outline'],
  ['Cite', 'Create bibliography', 'write',
    null, new Date(2015, 0, 7), 1 *24*60*60*1000, 20, 'Research'],
  ['Complete', 'Hand in paper', 'complete',
    null, new Date(2015, 0, 10), 1 *24*60*60*1000, 0, 'Cite,Write'],
  ['Outline', 'Outline paper', 'write',
    null, new Date(2015, 0, 6), 1 *24*60*60*1000, 100, 'Research']
]
options
{
  height: 275,
  gantt: {
    criticalPathEnabled: true,
    criticalPathStyle: {
      stroke: '#e64a19',
      strokeWidth: 5
    }
  }
}
{% endgcharts %}

Word Trees

{% gcharts wordtree WordTree 90% 400px %}
[
  ['Phrases'],
  ['cats are better than dogs'],
  ['cats eat kibble'],
  ['cats are better than hamsters'],
  ['cats are awesome'],
  ['cats are people too'],
  ['cats eat mice'],
  ['cats meowing'],
  ['cats in the cradle'],
  ['cats eat mice'],
  ['cats in the cradle lyrics'],
  ['cats eat kibble'],
  ['cats for adoption'],
  ['cats are family'],
  ['cats eat mice'],
  ['cats are better than kittens'],
  ['cats are evil'],
  ['cats are weird'],
  ['cats eat mice'],
]
options
{
  wordtree: {
    format: 'implicit',
    word: 'cats'
  }
}
{% endgcharts %}

연관포스트

Hexo 에서 사용할만한 차트