基于Chartist的在Node.js服务器端生成SVG图表的模块

 2018年11月15日    129     声明


svg-chartist是一个运行于Node.js服务端的Chartist包装器,它基于chartist-svg修改而来。可用于生成静态SVG图表,你可能将所生成的SVG图表插入到HTML页或导出到PDF。

  1. 安装
  2. API
  3. 示例

安装

npm install svg-chartist --save


API

svg-chartist被导出为一个函数,你可以像下面这样引用它:

const chartistSvg = require('svg-chartist');


chartistSvg(type, chartData, opts)

顶层函数,用于生成静态SVG图表。该函数会返回一个Promise,其fulfilled状态会包含所生成静态图表的HTML。


参数

  • type {string} 图表类型。可选值有:'bar''line''pie'
  • chartData {object} Chartist的数据(data)选项参数。请参阅:Chartist API
  • [opts] {object} 可选参数对象
    • [options] {object} Chartist的options选项参数。请参阅:Chartist API
    • [resOptions] {object} Chartist的responsiveOptions选项参数。请参阅:Chartist API
    • [onDraw] {Function} Chartist的'draw'事件临听函数
    • [title] {object} 图标的标题设置(如:heightwidth等),标题文本通过chartData.title传入
    • [subtitle] {object} 图标的子标题设置(如:heightwidth等),子标题文本通过chartData.title传入
    • [css] {string} 自定义的CSS,会追加到Chartist's 的CSS中


返回值

  • <Promise> {string} promise,其fulfilled状态会包含所生成静态图表的HTML。


示例

简单的折线图:

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
  labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
  series: [
    [12, 9, 7, 8, 5],
    [2, 1, 3.5, 7, 3],
    [1, 3, 4, 5, 6]
  ]
};

const options = {
  fullWidth: true,
  chartPadding: {
    right: 40
  }
}

const opts = {
  options: options
}

chartistSvg('line', data, opts).then((html) => {
  fs.writeFileSync('./examples/simpleLineChart.html', html)
})

MondayTuesdayWednesdayThursdayFriday2.557.51012.5

以上示例,与Chartist官方Simple line chart示例参数一致。

简单的饼状图:

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
  series: [5, 3, 4]
};

var sum = function(a, b) { return a + b };
const options = {
  width: 500,
  height: 300,
  labelInterpolationFnc: function(value) {
    return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
}

const opts = {
  options: options
}

chartistSvg('pie', data, opts).then((html) => {
  fs.writeFileSync('./examples/simplePieChart.html', html)
})

42%25%33%

以上示例,与Chartist官方Simple pie chart示例参数一致。


自定义柱状图:

const chartistSvg = require('svg-chartist');
const fs = require('fs');

const data = {
  title: 'Custom bar chart',
  subtitle: 'by: itbilu.com',
  labels: ['Q1','Q2','Q3','Q4'],
  series: [
    [80, 50, 100, 75]
  ]
};

const options = {
  width: 700, 
  height: 350,
  stackBars: true,
  axisX: {
    showLabel: true,
    showGrid: false,
  }
}

const opts = {
  options: options,
  title: {
    height: 50,
    fill: "#4A5572"
  },
  css: `.ct-series-a .ct-bar, .ct-series-a .ct-line, .ct-series-a .ct-point, .ct-series-a .ct-slice-donut{
    stroke: #4A5572
  }`,
  onDraw: function (data) {
    if(data.type === 'bar') {
      data.element.attr({
        style: 'stroke-width: 30px'
      });
    }
  }
}

chartistSvg('bar', data, opts).then((html) => {
  fs.writeFileSync('./examples/customBarChart.html', html)
})

Q1Q2Q3Q412.52537.55062.57587.5100Custom bar chartby: itbilu.com