javascript - 如何修复 HighCharts 中的列范围网格距离？

Question

我有一个columnrange 图表。两条水平网格线之间的垂直距离取决于我绘制的点数。

例如，如果我有 6 个点在不同的垂直高度，则网格距离会更大，如果我将网格点增加到 10-12，则距离会减小。

我理解这是因为，在上述两种情况下，图表试图通过调整两条网格线之间的垂直距离来适应整个高度。

但是，是否可以固定 gridLines 距离而不考虑要绘制的点数，并相应地调整图表容器的整体高度。

我试过了:

  xAxis:{
     labels:{
                            distance:10 //fixed
                        }
}

修复 tickInterval 也无济于事。我还尝试将 height:auto 赋给我的图表容器，但这没有用。

虽然修复 gridLines 之间的距离似乎很基本，但不知何故我没有完成它。请有人帮忙。演示在这里 http://jsfiddle.net/ay1Lk2yw/2/

Answer 1

您可以计算您的图表应该有多大并调整它的大小，这样网格线之间的距离将保持不变。

var gridLinesDistance = 20, //in pixels
  top = chart.plotTop,
  bottom = chart.spacing[2],
  axis = chart.xAxis[0],
  range = axis.dataMax - axis.dataMin + 1,
  newHeight = top + range * gridLinesDistance + bottom;

$("#container").height(newHeight + 'px');
chart.reflow(); //adjust the chart to the new size

演示:http://jsfiddle.net/u32gam9r/