在一条粗线中绘制开始和结束时间

Question

我正在尝试绘制一些高图图表，其中时间间隔基于一行中的日期显示为粗线，因此我的系列数据是开始和结束时间（数据库中的时间戳对象）。

Highcharts.chart('container', {
    chart: {
                                spacingTop: 0,
                                paddingTop: 0,
                                zoomType: 'x'
                        },
    title: {
        text: 'Workink time'
    },
    yAxis: {
            title: {
            text: 'Driving time'
        }
    },
    xAxis: {
                        type: 'datetime',
                     },      
    series: [{
        name: 'Date',

        data: [
            [Date.UTC(1970, 9, 21), 0],
            [Date.UTC(1970, 10, 4), 0.28],
            [Date.UTC(1970, 10, 9), 0.25],
            [Date.UTC(1970, 10, 27), 0.2],
            [Date.UTC(1970, 11, 2), 0.28],
            [Date.UTC(1970, 11, 26), 0.28],
            [Date.UTC(1970, 11, 29), 0.47],
            [Date.UTC(1971, 0, 11), 0.79],
            [Date.UTC(1971, 0, 26), 0.72],
            [Date.UTC(1971, 1, 3), 1.02],
            [Date.UTC(1971, 1, 11), 1.12],
            [Date.UTC(1971, 1, 25), 1.2],
            [Date.UTC(1971, 2, 11), 1.18],
            [Date.UTC(1971, 3, 11), 1.19],
            [Date.UTC(1971, 4, 1), 1.85],
            [Date.UTC(1971, 4, 5), 2.22],
            [Date.UTC(1971, 4, 19), 1.15],
            [Date.UTC(1971, 5, 3), 0]
        ]
    }]
});

它可能看起来像这张照片。

Answer 1

您可以为每个开始和结束日期元组添加一个系列，通过设置第一个系列的ID来链接所有第一个系列

id: 'Installation'

并使用

linkedTo: 'Installation',

并设置相同的颜色

var color = '#7cb5ec';

这就是系列应该是什么样子

series: [{
    id: 'Installation',
    name: 'Installation',
    color: color,
    data: [[Date.UTC(1970, 9, 21), 1], [Date.UTC(1970, 9, 22), 1]]
}, {
    name: 'Manufacturing',
    linkedTo: 'Installation',
    color: color,
    data: [[Date.UTC(1970, 9, 23), 1], [Date.UTC(1970, 9, 24), 1]]
}, {
    name: 'Sales & Distribution',
    linkedTo: 'Installation',
    color: color,
    data: [[Date.UTC(1970, 9, 25), 1], [Date.UTC(1970, 9, 30), 1]]
}, {
    name: 'Project Development',
    linkedTo: 'Installation',
    color: color,
    data: [[Date.UTC(1970, 10, 5), 1], [Date.UTC(1970, 10, 10), 1]]
}, {
    name: 'Other',
    linkedTo: 'Installation',
    color: color,
    data: [[Date.UTC(1970, 10, 12), 1], [Date.UTC(1970, 10, 30), 1]]
}]

如果完整的小提琴http://jsfiddle.net/32mhbyc5/

Answer 2

由于我不确定示例中的数据是什么意思，我使用@Liviu Boboia解析它的数据，提供了另一个如何使用columnrange系列创建虚线视觉的示例类型。

代码：

series: [{
  data: [
    [1, Date.UTC(1970, 9, 21), Date.UTC(1970, 9, 22)],
    [1, Date.UTC(1970, 9, 23), Date.UTC(1970, 9, 24)],
    [1, Date.UTC(1970, 9, 25), Date.UTC(1970, 9, 30)],
    [1, Date.UTC(1970, 10, 5), Date.UTC(1970, 10, 10)],
    [1, Date.UTC(1970, 10, 12), Date.UTC(1970, 10, 30)]
  ]
}]

小提琴：

• http://jsfiddle.net/jlbriggs/0jme6at3/

输出：