How I can stick together the lines on the Highcharts timeline chart?

问题

I creates the timeline Highchart like this 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)
             }]
         }]
     });
 });

As you can see, first part (with date range 2 August 02:00 - August 2 10:00 and has orange color) was placed directly before the second part (with date range 2 August 10:00 - August 2 23:00 and has green color). But between them we see a wite space. How I can remove this white space from chart, where dates are stuck together (like this: end of first part August 2 10:00, start of second part 2 August 10:00)

回答1:

You don't need to do anything in CSS - that's overkill, and causes maintenance headaches.

Highcharts has options for this, and many other formatting issues.

In your case, just set the borderWidth to 0 in your plotOptions:

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

(and/or set borderColor: 'transparent')

Example:

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

Reference:

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

来源：https://stackoverflow.com/questions/32065306/how-i-can-stick-together-the-lines-on-the-highcharts-timeline-chart