Insert Highcharts dynamic charts into the Hexo

General
## What is highcharts？ The official explanation is: > simple, fast, pure JavaScript interactive graphics.

Highcharts base on native browser technologies,no plugins needed.It support line,spline,area,areaspline,column,bar,pie,scatter,angular,gauges,arearange,areasplinerange,columnrange and polar chart.You can add,remove and modify series and points or modify axes on modern browsers including mobile,tablets and old IE back to IE6 because it’s very compatible,And if you just use it yourself for study you don’t need permission.

Hexo-highcharts

Hexo-highcharts is a small plugin I wrote base on the hexo tag plugin extension documention,which can easily add dynamic charts to hexo,the plugin has been published to npm and can be installed and used directly,If you have a better idea please email to me or pull request on Github,Thanks.

How to use?

1.install plugin

1
2
# cd hexo blog folder
npm install hexo-highcharts --save

2.use it in markdown page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
{% highcharts 85% 400 %}
{
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
    },
    title: {
        text: 'Browser market shares in January, 2018'
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: false
            },
            showInLegend: true
        }
    },
    series: [{
        name: 'Brands',
        colorByPoint: true,
        data: [{
            name: 'Chrome',
            y: 61.41,
            sliced: true,
            selected: true
        }, {
            name: 'Internet Explorer',
            y: 11.84
        }, {
            name: 'Firefox',
            y: 10.85
        }, {
            name: 'Edge',
            y: 4.67
        }, {
            name: 'Safari',
            y: 4.18
        }, {
            name: 'Other',
            y: 7.05
        }]
    }]
}
{% endhighcharts %}

85% is chart width,400 is chart height,You can not set it, it will use the default Settings,The tag wraps the options of HighCharts,if you dont’t know how to set options, you can go to the official website of Highcharts to learn how to set it.

3.use external data

if you have a lot of data,you can put it in an external json file or import it throw API,but data format must follow the highcharts series format.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{% highcharts 85% 400 %}
{
    url: "{% asset_path elevation.json %}",
    chart: {
        type: 'area',
        zoomType: 'x',
        panning: true,
        panKey: 'shift'
    },
    title: {
        text: '2017 Tour DE France, Germany, France, 8th stop: Dole'
    }, 
    xAxis: {
        labels: {
            format: '{value} km'
        },
        minRange: 5,
        title: {
            text: 'distance'
        }
    },
    yAxis: {
        startOnTick: true,
        endOnTick: false,
        maxPadding: 0.35,
        title: {
            text: null
        },
        labels: {
            format: '{value} m'
        }
    },
    tooltip: {
        headerFormat: "distance: {point.x:.1f} km<br>",
        pointFormat: 'elevation: {point.y} m ',
        shared: true
    },
    legend: {
        enabled: false
    },
    series: []
}
{% endhighcharts %}