项目作者: csbun

项目描述 :
Using C3.js or Highcharts chart library in Gitbook.
高级语言: JavaScript
项目地址: git://github.com/csbun/gitbook-plugin-chart.git
创建时间: 2015-11-03T07:36:47Z
项目社区:https://github.com/csbun/gitbook-plugin-chart

开源协议:MIT License

下载


gitbook-plugin-chart

Using C3.js or Highcharts chart library in Gitbook.

Config

Chart Library

Config in book.json:

  1. {
  2. "plugins": [ "chart" ],
  3. "pluginsConfig": {
  4. "chart": {
  5. "type": "highcharts"
  6. }
  7. }
  8. }

type can be c3 or highcharts, default to c3.

Usage

Insert block in your markdown file.

Caution: the content of the blocks should be written in pure JSON. That is, each property should be quoted, and you should strictly use double quotes ", not single quotes ':

  1. // Invalid JSON
  2. {
  3. data: {
  4. type: 'bar'
  5. }
  6. }
  7. // Valid JSON
  8. {
  9. "data": {
  10. "type": "bar"
  11. }
  12. }

See the examples below.

Example for C3.js

You SHOULD NOT specify the bindto property for the chart.

  1. {% chart %}
  2. {
  3. "data": {
  4. "type": "bar",
  5. "columns": [
  6. ["data1", 30, 200, 100, 400, 150, 1500, 2500],
  7. ["data2", 50, 100, 300, 450, 650, 250, 1320]
  8. ]
  9. },
  10. "axis": {
  11. "y": {
  12. "tick": {
  13. "format": d3.format("$,")
  14. }
  15. }
  16. }
  17. }
  18. {% endchart %}

Getting Start with C3.js.

Example for C3.js in YAML

  1. {% chart format="yaml" %}
  2. data:
  3. type: bar
  4. columns:
  5. - [data1, 30, 200, 100, 400, 150, 250]
  6. - [data2, 50, 20, 10, 40, 15, 25]
  7. axes:
  8. data2: y2
  9. axis:
  10. y2:
  11. show: true
  12. {% endchart %}

Example for Highcharts

You SHOULD NOT specify the renderTo property for the chart.

  1. {% chart %}
  2. {
  3. "chart": {
  4. "type": "bar"
  5. },
  6. "title": {
  7. "text": "Fruit Consumption"
  8. },
  9. "xAxis": {
  10. "categories": ["Apples", "Bananas", "Oranges"]
  11. },
  12. "yAxis": {
  13. "title": {
  14. "text": "Fruit eaten"
  15. }
  16. },
  17. "series": [{
  18. "name": "Jane",
  19. "data": [1, 0, 4]
  20. }, {
  21. "name": "John",
  22. "data": [5, 7, 3]
  23. }]
  24. }
  25. {% endchart %}

Getting Start with Highcharts.

Development

Learn more about Gitbook Plugin

Prepare

Testing your plugin on your book before publishing it is possible using npm link.

In the plugin’s folder, run:

  1. npm link

Then in the test folder:

  1. npm link gitbook-plugin-chart

Start

In the plugin’s folder, run:

  1. npm run dev

Then in the test folder:

  1. npm start