Question

我有一个高图表图表，这是结构的片段。

yAxis: {
                    min: 0,
                    max: y_max,
                    //...snip...//
        },

我将y_max设置为图表中的最高值。我的目标是让它点在图表的顶部。

当y_max小于或等于10,000时，图表会缩放，因此10,000是图表的顶部。当我达到10,002时，图表会缩放，因此15,000是图表的顶部（因此使得顶点远低于图表的顶部）。

有没有办法阻止这个y轴增量跳跃，这样图表的顶部真的是10,002？

更新：这是一个显示问题的小提琴：http://jsfiddle.net/bvykw1eu/ 41是最大值，它显示的空间最大为50。

Answer 1

默认情况下，轴是布局的，以便在绘图区域的边缘出现刻度线。如果最大数据值不在结束刻度标记附近，则在最大数据值和绘图区域边缘之间将存在空白。如果将yAxis endOnTick属性设置为false，则将布置轴，以使最大值出现在绘图区域的边缘附近。例如......

$('#container').highcharts({
    ...
    yAxis: {
        endOnTick: false,
        ....
    },
    ...
});

YAxis还有一个startOnTick属性。

Answer 2

有两种方法可以防止这种情况：

简单一个：将xAxis.endOnTick设置为false，将xAxis.maxPadding设置为0，演示：http://jsfiddle.net/bvykw1eu/4/该解决方案的缺点是41刻度不会呈现（因为它不好），圆值）
hard one：使用xAxis.tickPositioner来计算应该呈现的刻度。您可以修改预先计算的位置，看看：http://jsfiddle.net/bvykw1eu/5/

我建议使用两种解决方案，我们得到了很好的结果：

yAxis: {
  floor: 0,
  maxPadding: 0,
  endOnTick: false,
  title: {
    text: 'Percentage'
  },
  tickPositioner: function(min, max) {
    var ticks = this.tickPositions,
        tLen = ticks.length;

    ticks.splice(tLen - 2, 2, max);

    return ticks;

  }
},

设置highcharts图表的最高值

2 个答案: