常用的9个JavaScript图表库详解(4)

日期：2020-05-11 栏目：程序人生浏览：次

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');

转载注明出处：https://www.heiqu.com/53.html

常用的9个JavaScript图表库详解(4)

相关推荐