highcharts - 与 xrange 结合使用时 highcharts 奇怪的区域偏移错误

Question

我有一个组合的 xrange 和面积图，我无法将面积图放到图表视图的底部。

这就是我想要的： 但这就是我得到的：

任何帮助将不胜感激。

https://jsfiddle.net/OysteinAmundsen/ad6shmL0/39/

Highcharts.chart('container', {
  "chart": {
    "borderWidth": 0,
    "zoomType": "x",
    "animation": false,
    "scrollablePlotArea": { "scrollPositionX": 1 },
    "height": 200,
    "spacing": [0,0,0,0]
  },
  "scrollbar": { "enabled": true },
  "time": { "useUTC": false  },
  "title": { "enabled": false  },
  "legend": { "enabled": false  },
  "colors": [ "#0032FF"  ],
  "credits": { "enabled": false  },
  "plotOptions": { 
    "area": { "threshold": null },
    "xrange": { "minPointLength": 1 }
  },
  "xAxis": {
    "type": "datetime",
    "labels": { "overflow": "justify" },
    "title": { "text": "Date" }
  },
  "yAxis": {
    "lineWidth": 1,
    "tickWidth": 1,
    "alternateGridColor": "#F2F2F2",
    "title": { "enabled": false },
    "categories": [ "Closed", "Open" ],
    "max": 1,
    "min": -1
  },
  "tooltip": {
    "borderRadius": 6,
    "borderColor": "#0032FF",
    "useHTML": true
  },
  "series": [
    {
      "name": "Proximity",
      "type": "xrange",
      "turboThreshold": 0,
      "borderColor": "gray",
      "animation": 0,
      "pointWidth": 20,
      "colors": [
        "#0032FF",
        "#0b5668"
      ],
      "data": [
        { "x": 1567077909855, "x2": 1567083603287, "y": 1 },
        { "x": 1567077924011, "x2": 1567077924011, "y": 0 },
        { "x": 1567083619442, "x2": 1567083619442, "y": 1 }
      ]
    },
    {
      //"turboThreshold": 1000,
      "type": "area",
      "color": "#f9d5d5",
      "lineWidth": 0,
      "animation": 0,
      "data": [
        { "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
        { "x": 1566728240265, "y": 2, "name": "Loss" },
        { "x": 1567077909855, "y": 2, "name": "Gain" },
        { "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
        { "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
        { "x": 1567085295420, "y": 2, "name": "Loss" },
        { "x": 1567085533152, "y": 2, "name": "Gain" },
        { "x": 1567085533152, "y": 0, "name": "Gained connectivity" }
      ]
    }
  ]
});

Answer 1

代替区域系列类型使用xAxis.plotBands：

xAxis: {
  type: 'datetime',
  plotBands: [{
    from: 1567079711855,
    to: 1567077909855,
    color: '#f9d5d5'
  }, {
    from: 1567082015102,
    to: 1567079910825,
    color: '#f9d5d5'
  }]
}

演示：

• https://jsfiddle.net/BlackLabel/y706czmo

API参考：

• https://api.highcharts.com/highcharts/xAxis.plotBands