如何将Highcharts时间轴图表上的线粘在一起

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

本文关键字：在一起 Highcharts 时间      更新时间：2023-09-26

我像这样创建了时间线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)

您不需要在CSS中做任何事情-这是多余的，并且会导致维护问题。

Highcharts有这个选项，以及许多其他格式问题。

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

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

(and/or set borderColor: 'transparent')

的例子:

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

  • http://api.highcharts.com/highcharts plotOptions.columnrange.borderWidth
相关文章：