如何将Highcharts时间线图表上的线粘在一起? [英] How I can stick together the lines on the Highcharts timeline chart?
问题描述
我这样创建时间轴Highchart jsfiddle.net
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)
}]
}]
});
});
如您所见，第一部分(日期范围为8月2日02:00-8月2 10:00并具有橙色)放置在第二部分之前(日期范围为8月2日10:00-8月2日23) :00并具有绿色).但是在他们之间，我们看到了一个空白空间.如何从日期固定在一起的图表中删除此空白(例如:第一部分8月2日10:00结束，第二部分8月2日10:00开始)
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)
推荐答案
您无需在CSS中执行任何操作-这太过分了，并且会引起维护麻烦.
You don't need to do anything in CSS - that's overkill, and causes maintenance headaches.
Highcharts对此具有选项，并且还有许多其他格式问题.
Highcharts has options for this, and many other formatting issues.
在您的情况下，只需在plotOptions中将borderWidth设置为0:
In your case, just set the borderWidth to 0 in your plotOptions:
plotOptions: {
columnrange: {
borderWidth:0,
}
}
(和/或设置borderColor: 'transparent')
示例:
参考:
这篇关于如何将Highcharts时间线图表上的线粘在一起?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
