使用 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

我想我走错了方向，范围柱形图正是我要找的东西。

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

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

以下是Canvas实现范围柱状图的Js代码

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/

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

Plot a bar chart with offset and duration using c3 charts

javascript

c3.js