常用的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 图表库。
上一篇: 爸,你也来一口