【发布时间】：2013-08-05 08:46:08
【问题描述】：
在我的应用程序中，我创建了一个 highcharts 对象，将 zoomtype 设置为 xy。由于值的范围不同，每个数据集都有自己的 y 轴（例如，一个数据集可能有无限的最大值，而其他基于百分比的值限制为 100/-100）。如果加载了只有正值的数据集和既有正值又有负值的数据集，我可以很好地对齐 y 轴的零点。
但是，在放大时，零点会错位。如果我放大 20 到 -10 的范围，没有任何负值的数据集将只显示 20 到 0 的范围。重置缩放后一切都很好。如果我使用 highcharts 默认添加的 y 轴，则柱形图的条在放大时会很好地对齐。但是，这并不能解决零点错位的问题。我已经遇到这个问题几天了，我似乎无法解决它。我尝试过使用 yAxis 设置和图表的其他设置，但这也没有为我解决任何问题。
任何帮助将不胜感激，如果需要，我可以提供我的一些代码。
添加y轴的代码：
function addYAxis(opposite){
chart.addAxis({
// set ID to axis number
id: yAxisCounter,
// Don't align the labels on the y-axis
alignTicks: false,
// Don't allow decimals values on the axis labels
allowDecimals: false,
// set max padding to 0
maxPadding: 0,
// set minimum padding to 0 so the chart does not add any padding
minPadding: 0,
// Hide this axis if it doesn't have associated values and/or labels
showEmpty: false,
// Set the space between labels on the axis
//tickInterval: tickInterval,
tickPixelInterval: 25,
// set the color of the gridlines in the chart
gridLineColor: '#FFFFFF',
// set the location of the yAxis
opposite: opposite,
// Construct label value that is shown when hovering over a bar in the chart
labels: {
formatter: function(){
return this.value;
},
style: {
// Set the color of the label text
color: getColor(),
// Set the letter size of the label text
fontSize: 10
}
}
});
}
function addSeries(id, vals){
// Add a series of data to the chart;
chart.addSeries({
// Construct series name
name: id,
// Construct identifier to we can distinguish different datasets
identifier: id,
// Set the data
data: vals,
// Link these series to the current y-Axis
yAxis: yAxisCounter,
// Make this series visible
visible: true,
// Don't add shadows'
shadow: false,
// Set the color of the bars associated to these values
color: getColor()
});
}
重置缩放后的代码：
chart.axes[0].setExtremes(chart.axes[0].dataMin, chart.axes[0].dataMax);
var yAxes = chart.yAxis;
var negativeVals = false;
// Check if any of the yAxes contain negative values in the associated dataset
for (var axis in yAxes){
var minVal = yAxes[axis].dataMin;
if (minVal < 0){
negativeVals = true;
}
}
// Loop through the y-axes
for (var axis in yAxes){
// Get the min and max vals of the associated dataset
var minVal = yAxes[axis].dataMin;
var maxVal = yAxes[axis].dataMax;
// If we have any negative values
if (negativeVals){
// Boolean to determine if the maximum value is larger than the minimum
var maxGreaterThanMin = maxVal >= (minVal * -1);
// If the maximum value is greater than the absolute minimum value
if (maxGreaterThanMin){
// Calculate min and max
var maximum = maxVal;
var minimum = maxVal * -1;
// Set the extremes of the yAxis
yAxes[axis].setExtremes(minimum, maximum, false);
}
// If the absolute minval is greater than the max value
else{
// Calculate the min and max
var maximum = minVal * -1;
var minimum = minVal;
// Set the extremes of the yAxis
yAxes[axis].setExtremes(minimum, maximum, false);
}
}
// If there are no negative values present at all, we can set the range from 0 to maxVal
else{
yAxes[axis].setExtremes(0, maxVal, false);
}
}
chart.xAxis[0].isDirty = true;
chart.redraw();
编辑：通过在放大时覆盖默认行为解决了这个问题。我使用选择事件的最小值和最大值来设置 x 轴的极值。之后，我将 y 轴的零值与重置缩放后调用的代码的编辑版本对齐。小提琴：http://jsfiddle.net/5m9JW/355/
希望这也可以帮助遇到同样问题的人。
【问题讨论】：
-
为什么不使用谷歌图表？ developers.google.com/chart
-
我以前没有看过 Google Charts。我正在实施的应用程序基于之前创建的项目，该项目没有按预期工作。该项目使用了高图表，这似乎工作正常。但是，Google Charts 看起来很有趣，而且它似乎没有 Highcharts 复杂。当我有时间时，我会研究它。感谢您的提示！
-
无法编辑我之前的评论：出于安全原因，我们需要能够将 js 库存储在我们的服务器上，我怀疑我们可以使用 Google Charts 做到这一点。如果我们必须通过 Google API 加载库，并且有可能将数据发送到 Google，那就不行了。
标签： javascript jquery highcharts