使用c3图表绘制具有偏移和持续时间的条形图

Question

我试图显示一个人的每日工作时间，输入日期和持续时间为几小时。

现在我正在努力获得图表中标记的持续时间的偏移量，例如一个人在上午9:30开始工作并在下午6点结束。有没有办法从9:30到下午6点开始吧？

我是否也按照正确的方法解决了这个问题？

以下是我目前的代码。

var chart = c3.generate({
  data: {
    x: 'x',
    columns: [
      ['x', '2018-01-01', '2018-01-02', '2018-01-03', '2018-01-04', '2018-01-05', '2018-01-06'],
      ['Hours Worked', 35000, 37000, 29000, 32000, 33500, 0]
    ],
    type:'bar'
  },
  axis: {
    x: {
      type: 'timeseries'
    },
    y: {
      tick : {
            format : function (y) {
                var format = d3.time.format("%H:%M");
                return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
            }
        },
    min:25200,
    max:75600,

    }
  }
});

这里的代码可以在这里找到https://jsfiddle.net/s66amhvv/3/。

Answer 1

我想我正走向错误的方向，而Range Column图表就是我想要的东西。

由于c3目前不支持范围柱形图，我转移到canvasjs来构建图表。

虽然图表仍有一些问题，但我认为它可能会给我一些正确的方向。

以下是Canvas Js Code实现范围柱形图

var chart = new CanvasJS.Chart("chartContainer", {
    theme : "light2", // "light1", "light2", "dark1", "dark2"
    animationEnabled : true,
    title : {
        text : "Attendance Log"
    },
    dataPointWidth : 5,
    toolTip : {
        shared : true,
        contentFormatter : function (e) {
            console.log(e)
            var content = " ";
            var format = d3.time.format("%I:%M %p");
            var inTime = format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.entries[0].dataPoint.y[0] * 1000)))
                var outTime = format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.entries[0].dataPoint.y[1] * 1000)))

                content += "Out Time: " + outTime + "</br> In Time: " + inTime

                return content;
        }
    },
    axisY : {
        title : "Time",
        labelFormatter : function (e) {

            var format = d3.time.format("%I:%M %p");
            return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (e.value * 1000)));
        }

    },
    axisX : {
        valueFormatString : "DD-MMM",
        labelAngle : -50
    },
    data : [{
            type : "rangeColumn",
            /* yValueFormatString: function (y) {
            console.log(y)
            var format = d3.time.format("%H:%M");
            return format(new Date(new Date('01-01-2016 00:00:00').getTime() + (y * 1000)));
            } */
            xValueFormatString : "DD MMM",
            color : "LightSeaGreen",
            dataPoints : [{
                    x : new Date(2012, 01, 01),
                    y : [35000, 50000]
                }, {
                    x : new Date(2012, 01, 01),
                    y : [54000, 60000]
                }, {
                    x : new Date(2012, 01, 02),
                    y : [30000, 60000]
                }, {
                    x : new Date(2012, 01, 03),
                    y : [40000, 80000]
                }, {
                    x : new Date(2012, 01, 04),
                    y : [40000, 70000]
                }

            ]
        }
    ]
});
chart.render();

https://jsfiddle.net/s66amhvv/9/