hexo-tag-easy-charts
The easy to use chart tags for the hexo, the idea came from my favorite markdown editor - MarkEditor.
Installation
1 2 |
npm install hexo-inject --save npm install hexo-tag-easy-charts --save |
Barchart
Horizontal Headings
1 2 3 4 |
{% barchart 'Barchart with Horizontal Headings' %} Durian | Clementine | Durian | Mulberry | Papaya | Rambutan 97 | 72 | 89 | 93 | 68 | 75 {% endbarchart %} |
{% barchart ‘Barchart with Horizontal Headings’ %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endbarchart %}
Vertical Headings
1 2 3 4 5 6 7 8 9 |
{% barchart 'Barchart with Vertical Headings' %} Fruit | Sales Durian | 56 Clementine | 85 Durian | 73 Mulberry | 93 Papaya | 68 Rambutan | 53 {% endbarchart %} |
{% barchart ‘Barchart with Vertical Headings’ %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endbarchart %}
Two Dimensional
1 2 3 4 5 6 7 8 |
{% barchart 'Barchart with Two Dimensional' %} Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan Q1 | 80 | 73 | 72 | 62 | 83 | 65 Q2 | 56 | 60 | 50 | 58 | 57 | 63 Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88 Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86 Q4 | 54 | 58 | 67 | 64 | 50 | 93 {% endbarchart %} |
{% barchart ‘Barchart with Two Dimensional’ %}
Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
Q1 | 80 | 73 | 72 | 62 | 83 | 65
Q2 | 56 | 60 | 50 | 58 | 57 | 63
Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88
Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86
Q4 | 54 | 58 | 67 | 64 | 50 | 93
{% endbarchart %}
Note: Early Q3(Q3)
and Late Q3(Q3)
will automatically combined.
Linechart
Horizontal Headings
1 2 3 4 |
{% linechart 'Linechart with Horizontal Headings' %} Durian | Clementine | Durian | Mulberry | Papaya | Rambutan 97 | 72 | 89 | 93 | 68 | 75 {% endlinechart %} |
{% linechart ‘Linechart with Horizontal Headings’ %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endlinechart %}
Vertical Headings
1 2 3 4 5 6 7 8 9 |
{% linechart 'Linechart with Vertical Headings' %} Fruit | Sales Durian | 56 Clementine | 85 Durian | 73 Mulberry | 93 Papaya | 68 Rambutan | 53 {% endlinechart %} |
{% linechart ‘Linechart with Vertical Headings’ %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endlinechart %}
Two Dimensional
1 2 3 4 5 6 7 8 |
{% linechart 'Linechart with Two Dimensional' %} Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan Q1 | 80 | 73 | 72 | 62 | 83 | 65 Q2 | 56 | 60 | 50 | 58 | 57 | 63 Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88 Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86 Q4 | 54 | 58 | 67 | 64 | 50 | 93 {% endlinechart %} |
{% linechart ‘Linechart with Two Dimensional’ %}
Quarter | Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
Q1 | 80 | 73 | 72 | 62 | 83 | 65
Q2 | 56 | 60 | 50 | 58 | 57 | 63
Early Q3(Q3) | 61 | 72 | 85 | 76 | 69 | 88
Late Q3(Q3) | 83 | 91 | 98 | 82 | 62 | 86
Q4 | 54 | 58 | 67 | 64 | 50 | 93
{% endlinechart %}
Note: Early Q3(Q3)
and Late Q3(Q3)
will automatically combined.
Piechart
Horizontal Headings
1 2 3 4 |
{% piechart 'Piechart with Horizontal Headings' %} Durian | Clementine | Durian | Mulberry | Papaya | Rambutan 97 | 72 | 89 | 93 | 68 | 75 {% endpiechart %} |
{% piechart ‘Piechart with Horizontal Headings’ %}
Durian | Clementine | Durian | Mulberry | Papaya | Rambutan
97 | 72 | 89 | 93 | 68 | 75
{% endpiechart %}
Vertical Headings
1 2 3 4 5 6 7 8 9 |
{% piechart 'Piechart with Vertical Headings' %} Fruit | Sales Durian | 56 Clementine | 85 Durian | 73 Mulberry | 93 Papaya | 68 Rambutan | 53 {% endpiechart %} |
{% piechart ‘Piechart with Vertical Headings’ %}
Fruit | Sales
Durian | 56
Clementine | 85
Durian | 73
Mulberry | 93
Papaya | 68
Rambutan | 53
{% endpiechart %}
Options
- width
- height
- legend
Example
1 2 |
{% piechart 'title' width:300px height:400px legend:false %} {% endpiechart %} |
近期评论