前端开发者常用的9个JavaScript图表库

2017-12-24 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

当前,数据可视化已经成为数据科学领域非常重要的一部分。不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析。
对任何一个组织来说,如果能够充分的获取数据、可视化数据和分析数据,那么就能很大程度上帮助了解数据产生的深层次原因,以便据此做出正确的决定。
对于前端开发人员来说,如果能够掌握交互式网页中的数据可视化技术,则是一项很棒的技能。当然,通过一些 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 绘制雷达图的代码示例:
  1. const ctx = document.getElementById("myChart");
  2. const options = {
  3.     scale: {
  4.         // Hides the scale
  5.     }
  6. };
  7. const data = {
  8.     labels: ['Running', 'Swimming', 'Eating', 'Cycling'],
  9.     datasets: [
  10.          {
  11.             data: [-10, -5, -3, -15],
  12.             label: "two",
  13.              borderColor: '#ffc63b'
  14.             },
  15.          {
  16.             data: [10, 5, 3, 10],
  17.             label: "three",
  18.             borderColor: '#1d9a58'
  19.             },
  20.             {
  21.         data: [18, 10, 4, 2],
  22.         label: "one",
  23.         borderColor: '#d8463c'
  24.     },
  25. ]
  26. }

  27. const myRadarChart = new Chart(ctx, {
  28.     data: data,
  29.     type: 'radar',
  30.     options: options
  31. });
复制代码


Chartist
Chartist 库很适合于创建美观、响应能力强、阅读友好的图表。Chartist 使用 SVG 来呈现图表。
Chartist 还提供了使用 CSS 媒体查询和创意动画来自定义图表的能力。用户使用 Chartist 在图表设计中实现自己的所有创意。
Chartist 易于配置,也易于使用 Sass 进行定制。但是,它不支持旧浏览器。
使用 Chartist,可以通过 CSS 的样式来美化你的 SVG,用户完全可以现实自己所想的所有图表样式。
使用 npm 安装 Chartist:
npm install chartist --save
Chartist 创建具有自定义标签的饼图的代码示例:
  1. var data = {
  2.   labels: ['Bananas', 'Apples', 'Grapes'],
  3.   series: [20, 15, 40]
  4. };
  5. var options = {
  6.   labelInterpolationFnc: function(value) {
  7.     return value[0]
  8.   }
  9. };
  10. var responsiveOptions = [
  11.   ['screen and (min-width: 640px)', {
  12.     chartPadding: 30,
  13.     labelOffset: 130,
  14.     labelDirection: 'explode',
  15.     labelInterpolationFnc: function(value) {
  16.       return value;
  17.     }
  18.   }],
  19.   ['screen and (min-width: 1024px)', {
  20.     labelOffset: 80,
  21.     chartPadding: 20
  22.   }]
  23. ];
  24. new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
复制代码


FlexChart
FlexChart 是高性能的图表工具。使用 FlexChart,可轻松的将表格数据可视化为业务图表。FlexChart 不但支持常见的图表类型,如折线图、饼状图、面积图等,还支持气泡图、K线图、条形图、漏斗图等高级图表类型。
FlexChart 的使用也十分简单,FlexChart 图表将所有与数据有关的任务都委托给 CollectionView 类,只需操作 CollectionView 类,就能实现过滤、排序和分组数据等功能。
FlexChart 包含的图表元素也比较全面,如图表图例、图表标题、图表页脚、数轴、图表 series 和标签等,用户也可以为图表添加自定义的元素,如平均线和趋势线等。
FlexChart 本质上是一种交互式的图表,不论是数据进行任何的更改,都会自动反应在图表上,如图表曲线随数据放大缩小、过滤、钻取、动画等。
查看 FlexChart 的中文学习指南旭日图Demo
FlexChart 绘制柱状图的代码示例:
  1. onload = function() {
  2.   // wrap data in a CollectionView so the grid and chart 
  3.   // get notifications
  4.   var data = new wijmo.collections.CollectionView(getData());
  5.   // create the chart
  6.   var theChart = new wijmo.chart.FlexChart('#theChart', {
  7.       itemsSource: data,
  8.     bindingX: 'country',
  9.     series: [
  10.         { binding: 'sales', name: 'Sales' },
  11.       { binding: 'expenses', name: 'Expenses' },
  12.       { binding: 'downloads', name: 'Downloads' }
  13.     ]
  14.   })
  15.   // create a grid to show the data
  16.   var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  17.       itemsSource: data
  18.   })
  19.   // create some random data
  20.   function getData() {
  21.       var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
  22.         data = [];
  23.       for (var i = 0; i < countries.length; i++) {
  24.         data.push({
  25.           country: countries[i],
  26.           sales: Math.random() * 10000,
  27.           expenses: Math.random() * 5000,
  28.           downloads: Math.round(Math.random() * 20000),
  29.         });
  30.       }
  31.       return data;
  32.   }
  33. }
复制代码


Echarts
Echarts 是网页的数据可视化方面的一个非常有用的库。使用 Echarts,开发者可以创建直观的、可自定义的交互式图表,让数据的展示和分析变得十分容易。
由于 Echarts 是用普通的 JavaScript 编写的,所以 Echarts 不存在其它图表库存在的无法无缝迁移的问题。
同时,Echarts 也提供了很多官方文档供用户查看。
使用 npm 可以很容易的完成 Echarts 的安装:
npm install echarts --save
Echarts 绘制散点图代码示例:
  1. var dom = document.getElementById("container");
  2. var myChart = echarts.init(dom);
  3. var app = {};
  4. option = null;
  5. option = {
  6.     title: {
  7.         text: 'Large-scale scatterplot'
  8.     },
  9.     tooltip : {
  10.         trigger: 'axis',
  11.         showDelay : 0,
  12.         axisPointer:{
  13.             show: true,
  14.             type : 'cross',
  15.             lineStyle: {
  16.                 type : 'dashed',
  17.                 width : 1
  18.             }
  19.         },
  20.         zlevel: 1
  21.     },
  22.     legend: {
  23.         data:['sin','cos']
  24.     },
  25.     toolbox: {
  26.         show : true,
  27.         feature : {
  28.             mark : {show: true},
  29.             dataZoom : {show: true},
  30.             dataView : {show: true, readOnly: false},
  31.             restore : {show: true},
  32.             saveAsImage : {show: true}
  33.         }
  34.     },
  35.     xAxis : [
  36.         {
  37.             type : 'value',
  38.             scale:true
  39.         }
  40.     ],
  41.     yAxis : [
  42.         {
  43.             type : 'value',
  44.             scale:true
  45.         }
  46.     ],
  47.     series : [
  48.         {
  49.             name:'sin',
  50.             type:'scatter',
  51.             large: true,
  52.             symbolSize: 3,
  53.             data: (function () {
  54.                 var d = [];
  55.                 var len = 10000;
  56.                 var x = 0;
  57.                 while (len--) {
  58.                     x = (Math.random() * 10).toFixed(3) - 0;
  59.                     d.push([
  60.                         x,
  61.                         //Math.random() * 10
  62.                         (Math.sin(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  63.                     ]);
  64.                 }
  65.                 //console.log(d)
  66.                 return d;
  67.             })()
  68.         },
  69.         {
  70.             name:'cos',
  71.             type:'scatter',
  72.             large: true,
  73.             symbolSize: 2,
  74.             data: (function () {
  75.                 var d = [];
  76.                 var len = 20000;
  77.                 var x = 0;
  78.                 while (len--) {
  79.                     x = (Math.random() * 10).toFixed(3) - 0;
  80.                     d.push([
  81.                         x,
  82.                         //Math.random() * 10
  83.                         (Math.cos(x) - x * (len % 2 ? 0.1 : -0.1) * Math.random()).toFixed(3) - 0
  84.                     ]);
  85.                 }
  86.                 //console.log(d)
  87.                 return d;
  88.             })()
  89.         }
  90.     ]
  91. };
  92. ;
  93. if (option && typeof option === "object") {
  94.     myChart.setOption(option, true);
  95. }
复制代码


NVD3
NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。
NVD3 具有很强大的图表功能,能够很方便的创建箱形图、旭日形和烛台图等。如果用户想在 JavaScript 图表库中用到大量的能力,推荐试用 NVD3
NVD3 图表库的速度有时可能会成为一个问题,与 Fastdom 安装配合使用,速度会更快。
NVD3 绘制简单的折线图代码示例:
  1. /*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
  2. nv.addGraph(function() {
  3.   var chart = nv.models.lineChart()
  4.                 .margin({left: 100})  //Adjust chart margins to give the x-axis some breathing room.
  5.                 .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
  6.                 .transitionDuration(350)  //how fast do you want the lines to transition?
  7.                 .showLegend(true)       //Show the legend, allowing users to turn on/off line series.
  8.                 .showYAxis(true)        //Show the y-axis
  9.                 .showXAxis(true)        //Show the x-axis
  10.   ;

  11.   chart.xAxis     //Chart x-axis settings
  12.       .axisLabel('Time (ms)')
  13.       .tickFormat(d3.format(',r'));

  14.   chart.yAxis     //Chart y-axis settings
  15.       .axisLabel('Voltage (v)')
  16.       .tickFormat(d3.format('.02f'));

  17.   /* Done setting the chart up? Time to render it!*/
  18.   var myData = sinAndCos();   //You need data...

  19.   d3.select('#chart svg')    //Select the <svg> element you want to render the chart in.   
  20.       .datum(myData)         //Populate the <svg> element with chart data...
  21.       .call(chart);          //Finally, render the chart!

  22.   //Update the chart when window resizes.
  23.   nv.utils.windowResize(function() { chart.update() });
  24.   return chart;
  25. });
  26. /**************************************
  27. * Simple test data generator
  28. */
  29. function sinAndCos() {
  30.   var sin = [],sin2 = [],
  31.       cos = [];

  32.   //Data is represented as an array of {x,y} pairs.
  33.   for (var i = 0; i < 100; i++) {
  34.     sin.push({x: i, y: Math.sin(i/10)});
  35.     sin2.push({x: i, y: Math.sin(i/10) *0.25 + 0.5});
  36.     cos.push({x: i, y: .5 * Math.cos(i/10)});
  37.   }

  38.   //Line chart data should be sent as an array of series objects.
  39.   return [
  40.     {
  41.       values: sin,      //values - represents the array of {x,y} data points
  42.       key: 'Sine Wave', //key  - the name of the series.
  43.       color: '#ff7f0e'  //color - optional: choose your own line color.
  44.     },
  45.     {
  46.       values: cos,
  47.       key: 'Cosine Wave',
  48.       color: '#2ca02c'
  49.     },
  50.     {
  51.       values: sin2,
  52.       key: 'Another sine wave',
  53.       color: '#7777ff',
  54.       area: true      //area - set to true if you want this line to turn into a filled area chart.
  55.     }
  56.   ];
  57. }
复制代码

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 绘制组合图的代码示例:
  1. var chart = c3.generate({
  2.     data: {
  3.         columns: [
  4.             ['data1', 30, 20, 50, 40, 60, 50],
  5.             ['data2', 200, 130, 90, 240, 130, 220],
  6.             ['data3', 300, 200, 160, 400, 250, 250],
  7.             ['data4', 200, 130, 90, 240, 130, 220],
  8.             ['data5', 130, 120, 150, 140, 160, 150],
  9.             ['data6', 90, 70, 20, 50, 60, 120],
  10.         ],
  11.         type: 'bar',
  12.         types: {
  13.             data3: 'spline',
  14.             data4: 'line',
  15.             data6: 'area',
  16.         },
  17.         groups: [
  18.             ['data1','data2']
  19.         ]
  20.     }
  21. });
复制代码


TauCharts
TauCharts 是最灵活的 JavaScript 图表库之一。它是基于 D3 创建的,是一个以数据为中心的 JavaScript 图表库,可以改进数据可视化的效果。
TauCharts 十分灵活,访问其 API 也十分轻松。TauCharts 为用户提供了无缝映射和可视化的数据,使用 TauCharts 能够设计出十分美观的数据界面。同时,TauCharts 也和易于学习。
通过 npm 安装 TauCharts:
npm install taucharts
TauCharts 绘制水平线的代码示例:
  1. var defData = [
  2.         {"team": "d", "cycleTime": 1, "effort": 1, "count": 1, "priority": "low"}, {
  3.             "team": "d",
  4.             "cycleTime": 2,
  5.             "effort": 2,
  6.             "count": 5,
  7.             "priority": "low"
  8.         }, {"team": "d", "cycleTime": 3, "effort": 3, "count": 8, "priority": "medium"}, {
  9.             "team": "d",
  10.             "cycleTime": 4,
  11.             "effort": 4,
  12.             "count": 3,
  13.             "priority": "high"
  14.         }, {"team": "l", "cycleTime": 2, "effort": 1, "count": 1, "priority": "low"}, {
  15.             "team": "l",
  16.             "cycleTime": 3,
  17.             "effort": 2,
  18.             "count": 5,
  19.             "priority": "low"
  20.         }, {"team": "l", "cycleTime": 4, "effort": 3, "count": 8, "priority": "medium"}, {
  21.             "team": "l",
  22.             "cycleTime": 5,
  23.             "effort": 4,
  24.             "count": 3,
  25.             "priority": "high"
  26.         },
  27.         {"team": "k", "cycleTime": 2, "effort": 4, "count": 1, "priority": "low"}, {
  28.             "team": "k",
  29.             "cycleTime": 3,
  30.             "effort": 5,
  31.             "count": 5,
  32.             "priority": "low"
  33.         }, {"team": "k", "cycleTime": 4, "effort": 6, "count": 8, "priority": "medium"}, {
  34.             "team": "k",
  35.             "cycleTime": 5,
  36.             "effort": 8,
  37.             "count": 3,
  38.             "priority": "high"
  39.         }];
  40. var chart = new tauCharts.Chart({
  41.             data: defData,
  42.             type: 'horizontalBar',           
  43.             x: 'effort',
  44.             y: 'team',
  45.             color:'priority'
  46.         });
  47. chart.renderTo('#bar');
复制代码

Recharts
ReCharts 是一个使用 React 构建的,基于 D3 的图表库。
使用 ReCharts,用户可以在 React Web 应用程序中无缝地编写图表。
Recharts 非常轻巧,并使用 SVG 元素来创建很奇特的图表。
使用 npm 安装 Recharts:
npm install recharts
Recharts 没有冗长的文档,它很直接。当你遇到困难时,使用 Recharts 可以很容易找到解决方案。
Recharts 创建自定义内容树图的代码示例:
  1. const {Treemap} = Recharts;

  2. const data = [
  3.           {
  4.             name: 'axis',
  5.             children: [
  6.               { name: 'Axes', size: 1302 },
  7.               { name: 'Axis', size: 24593 },
  8.               { name: 'AxisGridLine', size: 652 },
  9.               { name: 'AxisLabel', size: 636 },
  10.               { name: 'CartesianAxes', size: 6703 },
  11.             ],
  12.           },
  13.           {
  14.             name: 'controls',
  15.             children: [
  16.               { name: 'AnchorControl', size: 2138 },
  17.               { name: 'ClickControl', size: 3824 },
  18.               { name: 'Control', size: 1353 },
  19.               { name: 'ControlList', size: 4665 },
  20.               { name: 'DragControl', size: 2649 },
  21.               { name: 'ExpandControl', size: 2832 },
  22.               { name: 'HoverControl', size: 4896 },
  23.               { name: 'IControl', size: 763 },
  24.               { name: 'PanZoomControl', size: 5222 },
  25.               { name: 'SelectionControl', size: 7862 },
  26.               { name: 'TooltipControl', size: 8435 },
  27.             ],
  28.           },
  29.           {
  30.             name: 'data',
  31.             children: [
  32.               { name: 'Data', size: 20544 },
  33.               { name: 'DataList', size: 19788 },
  34.               { name: 'DataSprite', size: 10349 },
  35.               { name: 'EdgeSprite', size: 3301 },
  36.               { name: 'NodeSprite', size: 19382 },
  37.               {
  38.                 name: 'render',
  39.                 children: [
  40.                   { name: 'ArrowType', size: 698 },
  41.                   { name: 'EdgeRenderer', size: 5569 },
  42.                   { name: 'IRenderer', size: 353 },
  43.                   { name: 'ShapeRenderer', size: 2247 },
  44.                 ],
  45.               },
  46.               { name: 'ScaleBinding', size: 11275 },
  47.               { name: 'Tree', size: 7147 },
  48.               { name: 'TreeBuilder', size: 9930 },
  49.             ],
  50.           },
  51.               {
  52.                 name: 'layout',
  53.                 children: [
  54.                   { name: 'AxisLayout', size: 6725 },
  55.                   { name: 'BundledEdgeRouter', size: 3727 },
  56.                   { name: 'CircleLayout', size: 9317 },
  57.                   { name: 'CirclePackingLayout', size: 12003 },
  58.                   { name: 'DendrogramLayout', size: 4853 },
  59.                   { name: 'ForceDirectedLayout', size: 8411 },
  60.                   { name: 'IcicleTreeLayout', size: 4864 },
  61.                   { name: 'IndentedTreeLayout', size: 3174 },
  62.                   { name: 'Layout', size: 7881 },
  63.                   { name: 'NodeLinkTreeLayout', size: 12870 },
  64.                   { name: 'PieLayout', size: 2728 },
  65.                   { name: 'RadialTreeLayout', size: 12348 },
  66.                   { name: 'RandomLayout', size: 870 },
  67.                   { name: 'StackedAreaLayout', size: 9121 },
  68.                   { name: 'TreeMapLayout', size: 9191 },
  69.                 ],
  70.               },
  71.               { name: 'Operator', size: 2490 },
  72.               { name: 'OperatorList', size: 5248 },
  73.               { name: 'OperatorSequence', size: 4190 },
  74.               { name: 'OperatorSwitch', size: 2581 },
  75.               { name: 'SortOperator', size: 2023 },
  76.             ],
  77.           }
  78.         ];
  79. const COLORS = ['#8889DD', '#9597E4', '#8DC77B', '#A5D297', '#E2CF45', '#F8C12D'];
  80. const CustomizedContent = React.createClass({
  81.   render() {
  82.     const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;
  83.     return (
  84.       <g>
  85.         <rect
  86.           x={x}
  87.           y={y}
  88.           width={width}
  89.           height={height}
  90.           style={{
  91.             fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none',
  92.             stroke: '#fff',
  93.             strokeWidth: 2 / (depth + 1e-10),
  94.             strokeOpacity: 1 / (depth + 1e-10),
  95.           }}
  96.         />
  97.         {
  98.           depth === 1 ?
  99.           <text
  100.             x={x + width / 2}
  101.             y={y + height / 2 + 7}
  102.             textAnchor="middle"
  103.             fill="#fff"
  104.             fontSize={14}
  105.           >
  106.             {name}
  107.           </text>
  108.           : null
  109.         }
  110.         {
  111.           depth === 1 ?
  112.           <text
  113.             x={x + 4}
  114.             y={y + 18}
  115.             fill="#fff"
  116.             fontSize={16}
  117.             fillOpacity={0.9}
  118.           >
  119.             {index + 1}
  120.           </text>
  121.           : null
  122.         }
  123.       </g>
  124.     );
  125.   }
  126. });

  127. const SimpleTreemap = React.createClass({
  128.     render () {
  129.       return (
  130.         <Treemap
  131.           width={400}
  132.         height={200}
  133.         data={data}
  134.         dataKey="size"
  135.         ratio={4/3}
  136.         stroke="#fff"
  137.         fill="#8884d8"
  138.         content={<CustomizedContent colors={COLORS}/>}
  139.       />
  140.     );
  141.   }
  142. })

  143. ReactDOM.render(
  144.   <SimpleTreemap />,
  145.   document.getElementById('container')
  146. );
复制代码

Flot
目前,jQuery 已经成为 Web 开发人员非常重要的工具。有了 Flot.js,前端设计也变得更加容易。
Flot.js 是 JavaScript 库中较为古老的图表库之一。尽管如此,Flot.js 也不会因为绘制折线图、饼图、条形图、面积图、甚至堆叠图表而降低其性能。
Flot.js 有一个很完善的文档。当用户遇到困难时,可以很容易地找到解决办法。Flot.js 也支持旧版本的浏览器。
可以选择不使用 npm 来安装 Flot.js,而是在 HTML5 中包含 jQuery 和 JavaScript 文件。
Flot.js 的基本用法代码示例:
  1. $(function () {
  2.     var d1 = [];
  3.     for (var i = 0; i < 14; i += 0.5)
  4.         d1.push([i, Math.sin(i)]);

  5.     var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];

  6.     // a null signifies separate line segments
  7.     var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
  8.     
  9.     $.plot($("#placeholder"), [ d1, d2, d3 ]);
  10. });
复制代码


JavaScript 开发工具推荐
SpreadJS纯前端表格控件是基于 HTML5 的 JavaScript 电子表格和网格功能控件,提供了完备的公式引擎、排序、过滤、输入控件、数据可视化、Excel 导入/导出等功能,适用于 .NET、Java 和移动端等各平台在线编辑类 Excel 功能的表格程序开发。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: 前端开发者常用的9个JavaScript图表库


Powered by emlog 京ICP备12006971号-1 sitemap