Highcharts有不正确的竖线位置
问题描述:
我相信我在Highcharts中发现了一个错误 - 我看不到它是如何成为我的代码的(但它不会是我第一次错误!(jsfiddle link )这可能是一个严重的问题,因为在某些情况下,不正确的位置可能会在卫生保健领域造成严重后果,“不在图表上”!Highcharts有不正确的竖线位置
最简单的情况显示它:a 2如果第二个垂直条被添加,但是数据是空的,则原始条的位置被错误地偏移(为了简单起见,在我的例子中,我使用了相同的日期时间为垂直线和样条线的终点,但这不是必要的,以查看问题。)我已经转载此不同版本的Highcharts,包括最新的3.0.0。
在我的jsfiddle例子中,我已经注释掉了第二个垂直条,并且事情正确显示;只需取消注释掉该部分即可查看不正确的偏移量。如果第二个垂直条的数据不为空,则第一个垂直条再次正确显示。
http://jsfiddle.net/ckapilla/8vdkf/
// 3/20/2003
var startDt = Date.UTC(2013, 3 - 1, 20, 0, 0, 0);
var stopDt = Date.UTC(2013, 3 - 1, 20, 11, 59, 59);
var date1 = Date.UTC(2013, 3 - 1, 20, 8, 0, 0);
var date2 = Date.UTC(2013, 3 - 1, 20, 11, 0, 0);
var yMaxBG = 400;
var yMaxIns = 30;
var emptyData = [];
var barData = [{
x: date2,
y: 24
}];
var splineData = [{
x: date1,
y: 49
}, {
x: date2,
y: 141
}];
var glycemicChart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
min: startDt,
max: stopDt,
dateTimeLabelFormats: {
day: '%e-%b-%Y'
},
tickInterval: 24 * 3600 * 1000,
gridLineWidth: 2,
gridLineColor: '#a0a0a0',
minorTickInterval: 3600 * 1000,
minorGridLineWidth: 1,
minorGridLineColor: '#d0d0d0'
},
yAxis: [{
min: 50,
max: 400,
minorGridLineWidth: 0
}, {
min: 0,
max: 30,
alignTicks: false,
opposite: true
}],
plotOptions: {
pointInterval: 3600000 // one hour
},
series: [{
name: 'spline',
yAxis: 0,
data: splineData
},
{
name: 'Bar',
type: 'column',
yAxis: 1,
pointWidth: 10,
data: barData
}
/* un-comment the following to see incorrect offset */
/******,
{
name: 'dummy',
type: 'column',
yAxis: 1,
pointWidth: 10,
data: emptyData
}
********/
]
});
答
首先,确保你(在这种情况下3.0)使用最新版本。然后在plotOptions.column中,您可以选择grouping
。一般来说,当使用更多的列时,他们会被翻译一下,以确保它们不会相互重叠。分组选项旨在消除该行为。
见例如:http://jsfiddle.net/Fusher/8vdkf/2/
plotOptions: {
column: {
grouping: false
}
},
哇,这做到了 - 感谢这么多。我仍然对这种行为感到困惑,因为我的X轴是基于时间间隔的,并且没有类别。但是,如果这是它需要的工作,那就这样吧。再次感谢。 – ckapilla 2013-03-26 16:03:59