javascript - Highcharts 不显示小系列

Question

我对 Highchart 有疑问。

我使用 xrange 图表。

正如你在图片中看到的，系列之间有一个空白

未缩放图表

当我缩放图表时，如您在图片中看到的那样，空白空间消失了，它出现了系列。如何让它始终显示系列？我做错了什么？

放大图

我的代码:

var chart = Highcharts.chart('container', {
    chart: {
    	height: 240,
      zoomType: 'x',
      maintainAspectRatio: true,
     	animation: false
    },
    xAxis: {
    	crosshair: true,
      lineWidth: 0,
      minorGridLineWidth: 0,
      lineColor: 'transparent',
      minorTickLength: 0,
      tickLength: 0,
      gridLineWidth:0,
    	type: 'datetime',
    	min: 1517443200000,
      max: 1517529600000
    },
    series: [{
    	type: 'xrange',
      name: 'Test0',
      id: 'dataseries',
      borderRadius: 0,
      pointWidth: 30,
      pointPadding: 0,
      color: "#E74C3C",
      data: [
      	{x: 1517458080000, x2: 1517464260000, y: 2.2, color: "#E74C3C", total: "01:43"},
        {x: 1517465820000, x2: 1517469480000, y: 2.2, color: "#E74C3C", total: "01:01"},
        {x: 1517475720000, x2: 1517475780000, y: 2.2, color: "#E74C3C", total: "00:01"},
        {x: 1517479920000, x2: 1517483940000, y: 2.2, color: "#E74C3C", total: "01:07"},
        {x: 1517484960000, x2: 1517488620000, y: 2.2, color: "#E74C3C", total: "01:01"},
        {x: 1517489040000, x2: 1517489700000, y: 2.2, color: "#E74C3C", total: "00:11"},
        {x: 1517490180000, x2: 1517492400000, y: 2.2, color: "#E74C3C", total: "00:37"},
        {x: 1517494080000, x2: 1517494260000, y: 2.2, color: "#E74C3C", total: "00:03"},
        {x: 1517496120000, x2: 1517498100000, y: 2.2, color: "#E74C3C", total: "00:33"},
        {x: 1517498520000, x2: 1517498580000, y: 2.2, color: "#E74C3C", total: "00:01"}
      ],
      dataLabels: {
      	y: -1.19,
       	style: {
          textOutline: false,
          fontSize: '9px'
        },
        enabled: true,
        inside: true,
        formatter: function() {
          return this.point.total;
        }, 
      },
      marker: {
   			enabled: false
     	}
    }, {
    	type: 'xrange',
      name: 'Test1',
      id: 'dataseries',
      borderRadius: 0,
      pointWidth: 30,
      pointPadding: 0,
      color: "#E74C3C",
      data: [
      	{x: 1517443200000, x2: 1517458020000, y: 2.5, color: "#666666", total: "04:07"},
        {x: 1517464380000, x2: 1517465820000, y: 2.5, color: "#666666", total: "00:24"},
        {x: 1517469480000, x2: 1517475720000, y: 2.5, color: "#666666", total: "01:44"},
        {x: 1517475780000, x2: 1517479920000, y: 2.5, color: "#666666", total: "01:09"},
        {x: 1517483940000, x2: 1517484960000, y: 2.5, color: "#666666", total: "00:17"},
        {x: 1517488980000, x2: 1517489040000, y: 2.5, color: "#666666", total: "00:01"},
        {x: 1517489700000, x2: 1517490180000, y: 2.5, color: "#666666", total: "00:08"},
        {x: 1517492400000, x2: 1517494080000, y: 2.5, color: "#666666", total: "00:28"},
        {x: 1517494260000, x2: 1517496120000, y: 2.5, color: "#666666", total: "00:31"},
        {x: 1517498580000, x2: 1517529600000, y: 2.5, color: "#666666", total: "08:37"}
      ],
      dataLabels: {
      	y: -1.19,
       	style: {
          textOutline: false,
          fontSize: '9px'
        },
        enabled: true,
        inside: true,
        formatter: function() {
          return this.point.total;
        }, 
      },
      marker: {
        enabled: false
     	}
    }]
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<div id="container" style="height: 300px"></div>

你有什么想法吗？

Answer 1

您可以使用 minPointLength 选项来设置列的最小宽度:

series: [{
    type: 'xrange',
    minPointLength: 2,
    ...
}]

---

现场演示: http://jsfiddle.net/BlackLabel/tf3hnmbg/

API 引用: https://api.highcharts.com/highcharts/series.xrange.minPointLength