将开始和结束时间绘制为一条粗线的间隔答案

【问题标题】：drawing start and end time as intervall in one thick line将开始和结束时间绘制为一条粗线的间隔
【发布时间】：2017-03-23 08:18:24
【问题描述】：

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

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]
        ]
    }]
});

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

【问题讨论】：

那么，有什么问题吗？你试图做什么？什么不工作？您需要什么帮助？

标签： highcharts

【解决方案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/

【讨论】：

引入多个系列似乎有点过于复杂了
你可以循环创建系列，这是我唯一能想到的
好吧，再一次，因为帖子没有提出实际问题，所以很难回答。未经进一步解释，原始代码中的数据点似乎不适用于图示的图表类型。但无论哪种方式，都不需要多个系列来完成一条折线。

【解决方案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/

输出：

【讨论】：