我如何将Highcharts时间表图表上的线条粘在一起？

Question

我创建时间线Highchart，如jsfiddle.net

 $(function () {
     $('#container').highcharts({

         chart: {
             type: 'columnrange',
             inverted: true
         },
         title: {
             text: 'Equipment Status'
         },
         scrollbar: {
             enabled: true
         },
         xAxis: {
             categories: ['Status']
         },
         yAxis: {
             type: 'datetime',
             title: {
                 text: 'Timespan'
             }
         },
         plotOptions: {
             columnrange: {
                 grouping: false
             }
         },
         legend: {
             enabled: true
         },
         tooltip: {
             formatter: function () {
                 return '<b>' + this.x + ' - ' + this.series.name + '</b><br/>' + Highcharts.dateFormat('%e %B %H:%M', this.point.low) +
                     ' - ' + Highcharts.dateFormat('%B %e %H:%M', this.point.high) + '<br/>';
             }
         },

         series: [{
             name: 'Producing',
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 0, 0, 0),
                 high: Date.UTC(2013, 07, 03, 4, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 10, 0, 0),
                 high: Date.UTC(2013, 07, 03, 12, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 14, 0, 0),
                 high: Date.UTC(2013, 07, 03, 15, 0, 0)
             }

             ]
         }, {
             name: 'Breakdown',
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 4, 0, 0),
                 high: Date.UTC(2013, 07, 03, 10, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 03, 18, 0, 0),
                 high: Date.UTC(2013, 07, 03, 24, 0, 0)
             }]
         }, {
             name: "Changeover",
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 04, 1, 0, 0),
                 high: Date.UTC(2013, 07, 04, 5, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 02, 10, 0, 0),
                 high: Date.UTC(2013, 07, 02, 23, 0, 0)
             }, ]
         }, {
             name: "TrialRun",
             data: [{
                 x: 0,
                 low: Date.UTC(2013, 07, 04, 5, 0, 0),
                 high: Date.UTC(2013, 07, 04, 13, 0, 0)
             }, {
                 x: 0,
                 low: Date.UTC(2013, 07, 02, 2, 0, 0),
                 high: Date.UTC(2013, 07, 02, 10, 0, 0)
             }]
         }]
     });
 });

如您所见，第一部分（日期范围为8月2日02:00 - 8月2日10:00，橙色）直接放在第二部分之前（日期范围为8月2日10:00 - 8月2日23日：00并且有绿色）。但在他们之间，我们看到了一个空间。如何从图表中删除此空白区域，其中日期被粘在一起（例如：第一部分8月2日10:00结束，第二部分8月10日10:00开始）

Answer 1

你不需要在CSS中做任何事情 - 这太过分了，并且会导致维护问题。

Highcharts有此选项以及许多其他格式问题。

在您的情况下，只需将borderWidth设置为0中的plotOptions：

plotOptions: {
  columnrange: {
    borderWidth:0,
  }
}

（和/或设置borderColor: 'transparent'）

示例：

• http://jsfiddle.net/u3eWz/80/

参考：

• http://api.highcharts.com/highcharts#plotOptions.columnrange.borderWidth