javascript - 如何将 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 月 2 日 10:00 开始)

Answer 1

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

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

就您而言，只需在 plotOptions 中将 borderWidth 设置为 0 即可:

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

(和/或设置borderColor:'透明')

示例:

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

引用:

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