헥소(Hexo) 에 차트 추가

차트리스트

블로그 작성시에 가끔이지만 차트가 필요합니다.
Hexo 에서 차트 plugin 으로 등록되어 있는 리스트

• chartjs
• echarts
• googlecharts
• billboard.js
• mermaid
• plantuml

이중에 mermaid와 plantuml 은 UML 그리는 용도이고
나머지 차트를 확인해봅니다

chartjs

설치방법

$ npm install hexo-tag-chart --save

사용방법

{% chart 85% 300 %}
{
    type: 'line',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45]
        }]
    },
    options: {
        responsive: true,
        title: {
            display: true,
            text: 'Chart.js Line Chart'
        }
    }
};
{% endchart %}

사용결과

 

 

echarts

바이두 에서 아파치로 바뀌었습니다
{% quote %}
ECharts 正在 Apache 开源基金会孵化中，因此域名已不再使用，请访问 echarts.apache.org
ECharts is now under incubation at the Apache Software Foundation. So this domain name is no longer in use. Visit echarts.apache.org please
{% endquote %}

설치방법

$ npm install hexo-tag-echarts4 --save

사용방법

{% echarts 400 '85%' %}
var data = [];

for (var u = 0; u <= 10; u += 0.2) {
    var f = 12*u;
    f = Math.round(f*100)/100;
    data.push([u, f]);
}

option = {
    tooltip: {},
    xAxis: {
        name: 'U/V',
        interval: 1
    },
    yAxis: {
        name: 'f/Hz',
        interval: 10
    },
    series: [{
        data: data,
        type: 'line',
        lineStyle: {
            width: 4
        }
    }]
};
{% endecharts %}

사용결과

{% echarts 400 '85%' %}
var data = [];

for (var u = 0; u <= 10; u += 0.2) {
var f = 12u;
f = Math.round(f100)/100;
data.push([u, f]);
}

option = {
tooltip: {},
xAxis: {
name: 'U/V',
interval: 1
},
yAxis: {
name: 'f/Hz',
interval: 10
},
series: [{
data: data,
type: 'line',
lineStyle: {
width: 4
}
}]
};
{% endecharts %}

Google Charts

* 장점 - 굉장히 다양한 차트를 지원한다.
* 단점 - 데이터 interval 과 외부 csv, json 데이터를 연계하기 어렵다.

설치방법

$ npm install hexo-tag-gcharts --save

사용방법

{% gcharts corechart CandlestickChart '85%' '400px' %}
[
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
], true
options
{
    legend:'none'
}
{% endgcharts %}

사용결과

{% gcharts corechart CandlestickChart '85%' '400px' %}
[
['Mon', 20, 28, 38, 45],
['Tue', 31, 38, 55, 66],
['Wed', 50, 55, 77, 80],
['Thu', 77, 77, 66, 50],
['Fri', 68, 66, 22, 15]
], true
options
{
legend:'none'
}
{% endgcharts %}

billboard.js

* 장점 - 데이터 interval 처리하기 쉽다
* 단점 - plugin 을 직접 만들어 써야 한다

설치방법

$ npm install hexo-tag-bcharts --save

사용방법

{% bcharts chart 90% 400px %}
  data: {
    columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 130, 100, 140, 200, 150, 50]
    ],
    type: "bar", // for ESM specify as: bar()
  },
  bar: {
    width: {
      ratio: 0.5
    }
  }
  timeout
  setTimeout(function() {
    chart.load({
      columns: [
        ["data3", 130, -150, 200, 300, -200, 100]
      ]
    });
  }, 2000);
  setTimeout(function() {
    chart.load({
      columns: [
        ["data4", 120, 150, 200, 300, 200, 100]
      ]
    });
  }, 3000);
  setTimeout(function() {
    chart.load({
      columns: [
        ["data5", 100, 250, 300, 100, 400, 200]
      ]
    });
  }, 4000);
{% endbcharts %}

사용결과

{% bcharts chart 90% 400px %}
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", 130, 100, 140, 200, 150, 50]
],
type: "bar", // for ESM specify as: bar()
},
bar: {
width: {
ratio: 0.5
}
}
timeout
setTimeout(function() {
chart.load({
columns: [
["data3", 130, -150, 200, 300, -200, 100]
]
});
}, 2000);
setTimeout(function() {
chart.load({
columns: [
["data4", 120, 150, 200, 300, 200, 100]
]
});
}, 3000);
setTimeout(function() {
chart.load({
columns: [
["data5", 100, 250, 300, 100, 400, 200]
]
});
}, 4000);
{% endbcharts %}