d3-stack-time

d3-stack-time

一个D3时间堆叠图插件。

用法

// 导入D3与本插件
var d3 = require('d3');
var chart = require('d3-stack-time');

var data = {
  axisX: ['5-1', '5-2', '5-3', '5-4', '5-5', '5-6', '5-7', '5-8', '5-9', '5-10', '5-11', '5-12', '5-13', '5-14', '5-15', '5-16', '5-17', '5-18', '5-19', '5-20', '5-21', '5-22', '5-23', '5-24', '5-25'],
  values: [
    ['9:00', '18:30'],
    ['6:00', '12:00'],
    ['13:31', '14:31'],

    ['19:00', '23:30'],
    ['12:00', '13:30'],
    ['08:30', '13:30'],

    ['09:00', '10:30'],
    ['10:00', '13:00'],
    ['10:00', '13:30'],

    ['12:30', '13:30'],
    ['12:30', '14:00'],
    ['13:00', '14:00'],

    ['13:30', '18:30'],
    ['08:30', '18:26', '22:00'],
    [],

    [],
    ['09:04', '19:01'],
    ['09:00', '18:43'],
    ['09:24', '19:19'],
    ['09:15', '19:06'],
    ['09:00', '19:00'],
    ['9:14', '19:14'],
    ['09:18', '19:02'],
    ['09:00', '21:26'],
    ['10:09', '19:09']
  ]
};
d3.select('.time-stack').call(chart()
  .data(data)
  .titleText('test_title')
  .stackLabelCustom({
    'workBefore': 'Are you Ready?'
  })
);