常用的9个JavaScript图表库详解

当前，数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据，都需要经过适当的可视化处理，以便更好的呈现给用户读取和分析。

对任何一个组织来说，如果能够充分的获取数据、可视化数据和分析数据，那么就能很大程度上帮助了解数据产生的深层次原因，以便据此做出正确的决定。

对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 javascript 的图表库也会使前端的数据可视化变得更加容易。使用这些库，开发者可以在无需考虑不同的语法所带来的编程难题的情况下，轻松实现将数据转化为易于理解的图表。

下面是挑选出的 9 个 javascript 图表库：

chart.js chartist flexchart echarts nvd3 c3.js taucharts recharts flot 

chart.js

chart.js 是一种简洁、用户友好的图表库，同时也是基于 html5 的 javascript 库，用于创建动画、交互式和可自定义的图表和图形。

借助 chart.js，用户可以轻松直观地查看混合图表类型。默认情况下，也可以使用 chart.js 创建响应式网页。

chart.js 库允许用户快速创建可视化数据。chart.js 易于设置，对初学者十分友好。使用 chart.js 则不必考虑浏览器的兼容性问题，因为 chart.js 支持旧浏览器。

使用 npm 安装 chart.js：

npm install chart.js --save 

chart.js 绘制雷达图的代码示例： 

const ctx = document.getelementbyid("mychart");
const options = {
 scale: {
 // hides the scale
 }
};
const data = {
 labels: ['running', 'swimming', 'eating', 'cycling'],
 datasets: [
 　　　　　 {
  data: [-10, -5, -3, -15],
  label: "two",
  bordercolor: '#ffc63b'
  },
 　　　　　{
  data: [10, 5, 3, 10],
  label: "three",
  bordercolor: '#1d9a58'
  },
  {
 data: [18, 10, 4, 2],
 label: "one",
 bordercolor: '#d8463c'
 },
]
}

const myradarchart = new chart(ctx, {
 data: data,
 type: 'radar',
 options: options
});

chartist

 

chartist 库很适合于创建美观、响应能力强、阅读友好的图表。chartist 使用 svg 来呈现图表。

chartist 还提供了使用 css 媒体查询和创意动画来自定义图表的能力。用户使用 chartist 在图表设计中实现自己的所有创意。

chartist 易于配置，也易于使用 sass 进行定制。但是，它不支持旧浏览器。

使用 chartist，可以通过 css 的样式来美化你的 svg，用户完全可以现实自己所想的所有图表样式。

使用 npm 安装 chartist：

npm install chartist --save 

chartist 创建具有自定义标签的饼图的代码示例： 

var data = {
 labels: ['bananas', 'apples', 'grapes'],
 series: [20, 15, 40]
};
var options = {
 labelinterpolationfnc: function(value) {
 return value[0]
 }
};
var responsiveoptions = [
 ['screen and (min-width: 640px)', {
 chartpadding: 30,
 labeloffset: 130,
 labeldirection: 'explode',
 labelinterpolationfnc: function(value) {
 return value;
 }
 }],
 ['screen and (min-width: 1024px)', {
 labeloffset: 80,
 chartpadding: 20
 }]
];
new chartist.pie('.ct-chart', data, options, responsiveoptions);

flexchart

 

flexchart 是高性能的图表工具。使用 flexchart，可轻松的将表格数据可视化为业务图表。flexchart 不但支持常见的图表类型，如折线图、饼状图、面积图等，还支持气泡图、k线图、条形图、漏斗图等高级图表类型。

flexchart 的使用也十分简单，flexchart 图表将所有与数据有关的任务都委托给 collectionview 类，只需操作 collectionview 类，就能实现过滤、排序和分组数据等功能。

flexchart 包含的图表元素也比较全面，如图表图例、图表标题、图表页脚、数轴、图表 series 和标签等，用户也可以为图表添加自定义的元素，如平均线和趋势线等。

flexchart 本质上是一种交互式的图表，不论是数据进行任何的更改，都会自动反应在图表上，如图表曲线随数据放大缩小、过滤、钻取、动画等。

查看 flexchart 的中文学习指南和旭日图demo。

flexchart 绘制柱状图的代码示例： 

onload = function() {
 // wrap data in a collectionview so the grid and chart 
 // get notifications
 var data = new wijmo.collections.collectionview(getdata());
 // create the chart
 var thechart = new wijmo.chart.flexchart('#thechart', {
 itemssource: data,
 bindingx: 'country',
 series: [
 { binding: 'sales', name: 'sales' },
 { binding: 'expenses', name: 'expenses' },
 { binding: 'downloads', name: 'downloads' }
 ]
 })
 // create a grid to show the data
 var thegrid = new wijmo.grid.flexgrid('#thegrid', {
 itemssource: data
 })
 // create some random data
 function getdata() {
 var countries = 'us,germany,uk,japan,italy,greece'.split(','),
 data = [];
 for (var i = 0; i < countries.length; i++) {
 data.push({
  country: countries[i],
  sales: math.random() * 10000,
  expenses: math.random() * 5000,
  downloads: math.round(math.random() * 20000),
 });
 }
 return data;
 }
}

echarts

 

echarts 是网页的数据可视化方面的一个非常有用的库。使用 echarts，开发者可以创建直观的、可自定义的交互式图表，让数据的展示和分析变得十分容易。

由于 echarts 是用普通的 javascript 编写的，所以 echarts 不存在其它图表库存在的无法无缝迁移的问题。

同时，echarts 也提供了很多官方文档供用户查看。

使用 npm 可以很容易的完成 echarts 的安装：

npm install echarts --save 

echarts 绘制散点图代码示例： 

var dom = document.getelementbyid("container");
var mychart = echarts.init(dom);
var app = {};
option = null;
option = {
 title: {
 text: 'large-scale scatterplot'
 },
 tooltip : {
 trigger: 'axis',
 showdelay : 0,
 axispointer:{
  show: true,
  type : 'cross',
  linestyle: {
  type : 'dashed',
  width : 1
  }
 },
 zlevel: 1
 },
 legend: {
 data:['sin','cos']
 },
 toolbox: {
 show : true,
 feature : {
  mark : {show: true},
  datazoom : {show: true},
  dataview : {show: true, readonly: false},
  restore : {show: true},
  saveasimage : {show: true}
 }
 },
 xaxis : [
 {
  type : 'value',
  scale:true
 }
 ],
 yaxis : [
 {
  type : 'value',
  scale:true
 }
 ],
 series : [
 {
  name:'sin',
  type:'scatter',
  large: true,
  symbolsize: 3,
  data: (function () {
  var d = [];
  var len = 10000;
  var x = 0;
  while (len--) {
   x = (math.random() * 10).tofixed(3) - 0;
   d.push([
   x,
   //math.random() * 10
   (math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * math.random()).tofixed(3) - 0
   ]);
  }
  //console.log(d)
  return d;
  })()
 },
 {
  name:'cos',
  type:'scatter',
  large: true,
  symbolsize: 2,
  data: (function () {
  var d = [];
  var len = 20000;
  var x = 0;
  while (len--) {
   x = (math.random() * 10).tofixed(3) - 0;
   d.push([
   x,
   //math.random() * 10
   (math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * math.random()).tofixed(3) - 0
   ]);
  }
  //console.log(d)
  return d;
  })()
 }
 ]
};
;
if (option && typeof option === "object") {
 mychart.setoption(option, true);
}

nvd3

nvd3 是由 mike bostock 撰写的基于 d3 的 javascript 库。nvd3 允许用户在 web 应用程序中创建美观的、可复用的图表。

nvd3 具有很强大的图表功能，能够很方便的创建箱形图、旭日形和烛台图等。如果用户想在 javascript 图表库中用到大量的能力，推荐试用 nvd3

nvd3 图表库的速度有时可能会成为一个问题，与 fastdom 安装配合使用，速度会更快。

nvd3 绘制简单的折线图代码示例： 

/*these lines are all chart setup. pick and choose which chart features you want to utilize. */
nv.addgraph(function() {
 var chart = nv.models.linechart()
  .margin({left: 100}) //adjust chart margins to give the x-axis some breathing room.
  .useinteractiveguideline(true) //we want nice looking tooltips and a guideline!
  .transitionduration(350) //how fast do you want the lines to transition?
  .showlegend(true) //show the legend, allowing users to turn on/off line series.
  .showyaxis(true) //show the y-axis
  .showxaxis(true) //show the x-axis
 ;

 chart.xaxis //chart x-axis settings
 .axislabel('time (ms)')
 .tickformat(d3.format(',r'));

 chart.yaxis //chart y-axis settings
 .axislabel('voltage (v)')
 .tickformat(d3.format('.02f'));

 /* done setting the chart up? time to render it!*/
 var mydata = sinandcos(); //you need data...

 d3.select('#chart svg') //select the <svg> element you want to render the chart in. 
 .datum(mydata)  //populate the <svg> element with chart data...
 .call(chart);  //finally, render the chart!

 //update the chart when window resizes.
 nv.utils.windowresize(function() { chart.update() });
 return chart;
});
/**************************************
 * simple test data generator
 */
function sinandcos() {
 var sin = [],sin2 = [],
 cos = [];

 //data is represented as an array of {x,y} pairs.
 for (var i = 0; i < 100; i++) {
 sin.push({x: i, y: math.sin(i/10)});
 sin2.push({x: i, y: math.sin(i/10) *0.25 + 0.5});
 cos.push({x: i, y: .5 * math.cos(i/10)});
 }

 //line chart data should be sent as an array of series objects.
 return [
 {
 values: sin, //values - represents the array of {x,y} data points
 key: 'sine wave', //key - the name of the series.
 color: '#ff7f0e' //color - optional: choose your own line color.
 },
 {
 values: cos,
 key: 'cosine wave',
 color: '#2ca02c'
 },
 {
 values: sin2,
 key: 'another sine wave',
 color: '#7777ff',
 area: true //area - set to true if you want this line to turn into a filled area chart.
 }
 ];
}

c3.js

 

与 taucharts 相同，c3.js 也是一个非常有效的基于 d3 的图表可视化库。另外，c3.js 允许用户创建可定制的具有个人风格的类。

c3.js 看起来是个比较难的库，但是一旦掌握了 c3.js 技巧，就能得心应手的使用了。

有了 c3.js 图表库，即使在第一次渲染之后，用户也可以通过创建回调来更新图表。c3.js 也允许用户为自己的 web 应用程序创建可复用的图表，从而减少工作量。

使用 npm 安装 c3.js 图表库：

npm install c3 

c3.js 绘制组合图的代码示例：

var chart = c3.generate({
 data: {
 columns: [
  ['data1', 30, 20, 50, 40, 60, 50],
  ['data2', 200, 130, 90, 240, 130, 220],
  ['data3', 300, 200, 160, 400, 250, 250],
  ['data4', 200, 130, 90, 240, 130, 220],
  ['data5', 130, 120, 150, 140, 160, 150],
  ['data6', 90, 70, 20, 50, 60, 120],
 ],
 type: 'bar',
 types: {
  data3: 'spline',
  data4: 'line',
  data6: 'area',
 },
 groups: [
  ['data1','data2']
 ]
 }
});

taucharts

  

taucharts 是最灵活的 javascript 图表库之一。它是基于 d3 创建的，是一个以数据为中心的 javascript 图表库，可以改进数据可视化的效果。

taucharts 十分灵活，访问其 api 也十分轻松。taucharts 为用户提供了无缝映射和可视化的数据，使用 taucharts 能够设计出十分美观的数据界面。同时，taucharts 也和易于学习。

通过 npm 安装 taucharts：

npm install taucharts 

taucharts 绘制水平线的代码示例： 

var defdata = [
 {"team": "d", "cycletime": 1, "effort": 1, "count": 1, "priority": "low"}, {
  "team": "d",
  "cycletime": 2,
  "effort": 2,
  "count": 5,
  "priority": "low"
 }, {"team": "d", "cycletime": 3, "effort": 3, "count": 8, "priority": "medium"}, {
  "team": "d",
  "cycletime": 4,
  "effort": 4,
  "count": 3,
  "priority": "high"
 }, {"team": "l", "cycletime": 2, "effort": 1, "count": 1, "priority": "low"}, {
  "team": "l",
  "cycletime": 3,
  "effort": 2,
  "count": 5,
  "priority": "low"
 }, {"team": "l", "cycletime": 4, "effort": 3, "count": 8, "priority": "medium"}, {
  "team": "l",
  "cycletime": 5,
  "effort": 4,
  "count": 3,
  "priority": "high"
 },
 {"team": "k", "cycletime": 2, "effort": 4, "count": 1, "priority": "low"}, {
  "team": "k",
  "cycletime": 3,
  "effort": 5,
  "count": 5,
  "priority": "low"
 }, {"team": "k", "cycletime": 4, "effort": 6, "count": 8, "priority": "medium"}, {
  "team": "k",
  "cycletime": 5,
  "effort": 8,
  "count": 3,
  "priority": "high"
 }];
var chart = new taucharts.chart({
  data: defdata,
  type: 'horizontalbar',  
  x: 'effort',
  y: 'team',
  color:'priority'
 });
chart.renderto('#bar');

recharts

 

recharts 是一个使用 react 构建的，基于 d3 的图表库。

使用 recharts，用户可以在 react web 应用程序中无缝地编写图表。

recharts 非常轻巧，并使用 svg 元素来创建很奇特的图表。

使用 npm 安装 recharts：

npm install recharts 

recharts 没有冗长的文档，它很直接。当你遇到困难时，使用 recharts 可以很容易找到解决方案。

recharts 创建自定义内容树图的代码示例：

const {treemap} = recharts;

const data = [
  {
  name: 'axis',
  children: [
  { name: 'axes', size: 1302 },
  { name: 'axis', size: 24593 },
  { name: 'axisgridline', size: 652 },
  { name: 'axislabel', size: 636 },
  { name: 'cartesianaxes', size: 6703 },
  ],
  },
  {
  name: 'controls',
  children: [
  { name: 'anchorcontrol', size: 2138 },
  { name: 'clickcontrol', size: 3824 },
  { name: 'control', size: 1353 },
  { name: 'controllist', size: 4665 },
  { name: 'dragcontrol', size: 2649 },
  { name: 'expandcontrol', size: 2832 },
  { name: 'hovercontrol', size: 4896 },
  { name: 'icontrol', size: 763 },
  { name: 'panzoomcontrol', size: 5222 },
  { name: 'selectioncontrol', size: 7862 },
  { name: 'tooltipcontrol', size: 8435 },
  ],
  },
  {
  name: 'data',
  children: [
  { name: 'data', size: 20544 },
  { name: 'datalist', size: 19788 },
  { name: 'datasprite', size: 10349 },
  { name: 'edgesprite', size: 3301 },
  { name: 'nodesprite', size: 19382 },
  {
  name: 'render',
  children: [
   { name: 'arrowtype', size: 698 },
   { name: 'edgerenderer', size: 5569 },
   { name: 'irenderer', size: 353 },
   { name: 'shaperenderer', size: 2247 },
  ],
  },
  { name: 'scalebinding', size: 11275 },
  { name: 'tree', size: 7147 },
  { name: 'treebuilder', size: 9930 },
  ],
  },
  {
  name: 'layout',
  children: [
   { name: 'axislayout', size: 6725 },
   { name: 'bundlededgerouter', size: 3727 },
   { name: 'circlelayout', size: 9317 },
   { name: 'circlepackinglayout', size: 12003 },
   { name: 'dendrogramlayout', size: 4853 },
   { name: 'forcedirectedlayout', size: 8411 },
   { name: 'icicletreelayout', size: 4864 },
   { name: 'indentedtreelayout', size: 3174 },
   { name: 'layout', size: 7881 },
   { name: 'nodelinktreelayout', size: 12870 },
   { name: 'pielayout', size: 2728 },
   { name: 'radialtreelayout', size: 12348 },
   { name: 'randomlayout', size: 870 },
   { name: 'stackedarealayout', size: 9121 },
   { name: 'treemaplayout', size: 9191 },
  ],
  },
  { name: 'operator', size: 2490 },
  { name: 'operatorlist', size: 5248 },
  { name: 'operatorsequence', size: 4190 },
  { name: 'operatorswitch', size: 2581 },
  { name: 'sortoperator', size: 2023 },
  ],
  }
 ];
const colors = ['#8889dd', '#9597e4', '#8dc77b', '#a5d297', '#e2cf45', '#f8c12d'];
const customizedcontent = react.createclass({
 render() {
 const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
 return (
 <g>
 <rect
  x={x}
  y={y}
  width={width}
  height={height}
  style={{
  fill: depth < 2 ? colors[math.floor(index / root.children.length * 6)] : 'none',
  stroke: '#fff',
  strokewidth: 2 / (depth + 1e-10),
  strokeopacity: 1 / (depth + 1e-10),
  }}
 />
 {
  depth === 1 ?
  <text
  x={x + width / 2}
  y={y + height / 2 + 7}
  textanchor="middle"
  fill="#fff"
  fontsize={14}
  >
  {name}
  </text>
  : null
 }
 {
  depth === 1 ?
  <text
  x={x + 4}
  y={y + 18}
  fill="#fff"
  fontsize={16}
  fillopacity={0.9}
  >
  {index + 1}
  </text>
  : null
 }
 </g>
 );
 }
});

const simpletreemap = react.createclass({
 render () {
 return (
 <treemap
  width={400}
 height={200}
 data={data}
 datakey="size"
 ratio={4/3}
 stroke="#fff"
 fill="#8884d8"
 content={<customizedcontent colors={colors}/>}
 />
 );
 }
})

reactdom.render(
 <simpletreemap />,
 document.getelementbyid('container')
);

flot

目前，jquery 已经成为 web 开发人员非常重要的工具。有了 flot.js，前端设计也变得更加容易。

flot.js 是 javascript 库中较为古老的图表库之一。尽管如此，flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。

flot.js 有一个很完善的文档。当用户遇到困难时，可以很容易地找到解决办法。flot.js 也支持旧版本的浏览器。

可以选择不使用 npm 来安装 flot.js，而是在 html5 中包含 jquery 和 javascript 文件。

flot.js 的基本用法代码示例： 

$(function () {
 var d1 = [];
 for (var i = 0; i < 14; i += 0.5)
 d1.push([i, math.sin(i)]);
 
 var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
 
 // a null signifies separate line segments
 var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
 
 $.plot($("#placeholder"), [ d1, d2, d3 ]);
});

总结

以上介绍的 javascript 库都是高质量的图表库。但是在学习这些库的过程中，可能会因为学习曲线陡峭或是缺乏学习资料而遇到困难，一种很好的方案是将这些库结合起来使用。最后也欢迎大家补充更多的 javascript 图表库。