|
|
51CTO旗下网站
|
|
移动端

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

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

作者:子瑜说IT来源:今日头条|2019-07-18 10:14

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

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

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

下面是挑选出的9个 JavaScript 图表库:

  • Chart.js
  • Chartist
  • FlexChart
  • Echarts
  • NVD3
  • C3.js
  • TauCharts
  • ReCharts
  • Flot

Chart.js

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

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

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

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

使用 npm 安装 Chart.js:

  1. npm install chart.js --save 

Chart.js 绘制雷达图的代码示例:

  1. const options = { 
  2.  scale: { 
  3.  // Hides the scale 
  4.  } 
  5. }; 
  6. const data = { 
  7.  labels: ['Running''Swimming''Eating''Cycling'], 
  8.  datasets: [ 
  9.    { 
  10.  data: [-10, -5, -3, -15], 
  11.  label: "two"
  12.  borderColor: '#ffc63b' 
  13.  }, 
  14.   { 
  15.  data: [10, 5, 3, 10], 
  16.  label: "three"
  17.  borderColor: '#1d9a58' 
  18.  }, 
  19.  { 
  20.  data: [18, 10, 4, 2], 
  21.  label: "one"
  22.  borderColor: '#d8463c' 
  23.  }, 
  24. const myRadarChart = new Chart(ctx, { 
  25.  data: data, 
  26.  type: 'radar'
  27.  options: options 
  28. }); 

Chartist

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

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

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

Chartist 易于配置,也易于使用 Sass 进行定制。但是,它不支持旧浏览器。

使用 Chartist,可以通过 CSS 的样式来美化你的 SVG,用户完全可以现实自己所想的所有图表样式。

使用 npm 安装 Chartist:

  1. 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); 
前端开发者常用的9个JavaScript图表库

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.  } 

Echarts

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

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

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

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

使用 npm 可以很容易的完成 Echarts 的安装:

  1. 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. if (option && typeof option === "object") { 
  93.  myChart.setOption(optiontrue); 

NVD3

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

NVD3 是由 Mike Bostock 撰写的基于 D3 的 JavaScript 库。NVD3 允许用户在 Web 应用程序中创建美观的、可复用的图表。

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

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

NVD3 绘制简单的折线图代码示例:

  1. <pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">/*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. }</pre> 

C3.js

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

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

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

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

使用 npm 安装 C3.js 图表库:

npm install c3

C3.js 绘制组合图的代码示例:

  1. <pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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. });</pre> 

TauCharts

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

TauCharts 是最灵活的 JavaScript 图表库之一。它是基于 D3 创建的,是一个以数据为中心的 JavaScript 图表库,可以改进数据可视化的效果。

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

通过 npm 安装 TauCharts:

  1. npm install taucharts 

TauCharts 绘制水平线的代码示例:

  1. <pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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');</pre> 

Recharts

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

ReCharts 是一个使用 React 构建的,基于 D3 的图表库。

使用 ReCharts,用户可以在 React Web 应用程序中无缝地编写图表。

Recharts 非常轻巧,并使用 SVG 元素来创建很奇特的图表。

使用 npm 安装 Recharts:

  1. npm install recharts 

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

Recharts 创建自定义内容树图的代码示例:

  1. <pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">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. const COLORS = ['#8889DD''#9597E4''#8DC77B''#A5D297''#E2CF45''#F8C12D'];  
  79. const CustomizedContent = React.createClass({  
  80. render() {  
  81. const { root, depth, x, y, width, height, index, payload, colors, rank, name } = this.props;  
  82. return (  
  83. <g>  
  84. <rect  
  85. x={x}  
  86. y={y}  
  87. width={width}  
  88. height={height}  
  89. style={{  
  90. fill: depth < 2 ? colors[Math.floor(index / root.children.length * 6)] : 'none' 
  91. stroke: '#fff' 
  92. strokeWidth: 2 / (depth + 1e-10),  
  93. strokeOpacity: 1 / (depth + 1e-10),  
  94. }}  
  95. />  
  96.  
  97. depth === 1 ?  
  98. <text  
  99. x={x + width / 2}  
  100. y={y + height / 2 + 7}  
  101. textAnchor="middle"  
  102. fill="#fff"  
  103. fontSize={14}  
  104.  
  105. {name 
  106. </text>  
  107. null  
  108.  
  109.  
  110. depth === 1 ?  
  111. <text  
  112. x={x + 4}  
  113. y={y + 18}  
  114. fill="#fff"  
  115. fontSize={16}  
  116. fillOpacity={0.9}  
  117.  
  118. {index + 1}  
  119. </text>  
  120. null  
  121.  
  122. </g>  
  123. );  
  124.  
  125. });  
  126. const SimpleTreemap = React.createClass({  
  127. render () {  
  128. return (  
  129. <Treemap  
  130. width={400}  
  131. height={200}  
  132. data={data}  
  133. dataKey="size"  
  134. ratio={4/3}  
  135. stroke="#fff"  
  136. fill="#8884d8"  
  137. content={<CustomizedContent colors={COLORS}/>}  
  138. />  
  139. );  
  140.  
  141. })  
  142. ReactDOM.render(  
  143. <SimpleTreemap />,  
  144. document.getElementById('container' 
  145. );</pre> 

Flot

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

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

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

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

可以选择不使用 npm 来安装 Flot.js,而是在 HTML5 中包含 jQuery 和 JavaScript 文件。

Flot.js 的基本用法代码示例:

  1. <pre style="box-sizing: inherit; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 16px; white-space: pre-wrap; overflow: auto; border-radius: 3px; padding: 2px; line-height: 1.4; word-wrap: normal; display: block; background: rgb(63, 63, 63); color: rgb(220, 220, 220); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">$(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.  $.plot($("#placeholder"), [ d1, d2, d3 ]); 
  9. });</pre> 

JavaScript 开发工具推荐

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

总结

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

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

289人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

645人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

计算机病毒分析与防治简明教程

本书全面翔实地介绍了各种病毒的原理,以操作系统的发展为主线,结合病毒的发展过程来综合分析病毒。在分析工具上,较多地利用了脚本语言、...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客