条形图在时间线中创建间隙答案

【问题标题】：Bar chart creating gap in timeline条形图在时间线中创建间隙
【发布时间】：2019-08-27 08:34:03
【问题描述】：

我使用 Highcharts 创建了一个条形图，时间线以毫秒为单位。时间线包含多个系列，其中一些具有相同的颜色，以指示状态随时间的变化。出于某种原因，图表会在连续点之间产生间隙。可以在此处查看示例图表：https://jsfiddle.net/dh7q1emn/1/（这只是显示问题的简短摘录 - 实际图表可能有更多部分。）

我希望两个红色部分之间的“间隙”部分用橙色调填充。

这些是 Highchart 设置和数据：

Highcharts.chart('container', {
"chart": {
"zoomType": "x"
},
"credits": {
  "enabled": false
},
legend: {
  visible: false
},
"plotOptions": {
"line": {
  "linecap": "square",
  "lineWidth": 50,
  "marker": {
    "enabled": false
  }
},
"series": {
  "label": {
    "connectorAllowed": false,
    "enabled": false
  },
  "marker": {
    "enabled": false
  },
  "pointStart": 1566806513433,
  "showInLegend": false
}
},
   "series": [{
   "data": [
  [1566806513433, 2],
  [1566806659945, 2]
],
"color": "#f41930"
}, {
"data": [
  [1566806659945, 2],
  [1566806665051, 2]
],
"color": "#ff7843"
  }, {
"data": [
  [1566816565051, 2],
  [1566817251291, 2]
],
"color": "#f41930"
  }],
  "subtitle": {
"text": null
},
"title": {
"text": null
},
"tooltip": {
"enabled": true,
"pointFormat": "<tr><td>{series.name} </td>",
"reversed": true
},
"xAxis": {
"endOnTick": true,
"startOnTick": true,
"title": {
  "text": null
},
"type": "datetime"
},
"yAxis": {
"visible": false
}
});

我错过了什么？

【问题讨论】：

标签： highcharts bar-chart

【解决方案1】：

您的x 值有误。请用正确的结果检查结果：

"series": [{
    "data": [
        [1566806513433, 2],
        [1566806659945, 2]
    ],
    "color": "#f41930"
}, {
    "data": [
        [1566806659945, 2],
        [1566816565051, 2]  // correction
    ],
    "color": "#ff7843"
}, {
    "data": [
        [1566816565051, 2],
        [1566817251291, 2]
    ],
    "color": "#f41930"
}]

现场演示： https://jsfiddle.net/BlackLabel/cv6xrup8/

API 参考： https://api.highcharts.com/highcharts/series.line.data

【讨论】：