javascript - Highcharts 添加额外的系列和轴会破坏现有的 yAxis 最小值/最大值

Question

在下面的 fiddle (基于 Highcharts 示例)中，第一个系列正确显示，占据了图表的整个高度。

http://jsfiddle.net/markalroberts/h9j53yk4/4/

但是，当您单击按钮添加系列时，现有系列的比例将重新计算(不是我想要的)。

我用来添加轴/系列/数据的代码:

chart.addSeries({
        type: 'line',
        yAxis: 1,
        data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
    })

如何将现有的系列/yAxis组合设置为保持原来的样子，而只是将新系列绘制在顶部(也缩放以使用图表的整个高度)

更新

根据迈克的回答，我要做的很简单:

alignTicks: false

Answer 1

使用多个轴可能很棘手。我发现 kjfagan 在此 Stack Overflow 问题中的答案对您的情况很有帮助:Highcharts y-axis Ceiling not being respected 。

我在你的 fiddle 中所做的首先仅设置初始 y 轴，并根据 kjfagan 的答案为其指定 minPadding: 0 和 maxPadding: 0 属性:

yAxis: [{ 
    visible: true, 
    startOnTick: false, 
    endOnTick: false, 
    maxPadding: 0, 
    minPadding: 0
}],

接下来，在您的按钮事件中，我在此处设置了新轴的全套属性，包括 minPadding 和 maxPadding 属性:

$('#button').click(function() {
    c.addAxis({ 
        visible: true, 
        startOnTick: false, 
        endOnTick: false, 
        maxPadding: 0, 
        minPadding: 0, 
        opposite: true });
    c.addSeries({yAxis:1})
    c.xAxis[0].series[1].setData(j.Lines[1].Data);
});

最后，正如 Grzegorz Blachliński 深思熟虑的建议，我增加了图表本身的 marginTop。

此外，我添加了 alignTicks: false 以防止图表自动将轴调整为彼此的值，这可能会导致一些不稳定或意外的行为，具体取决于您正在绘制的内容。

chart: {
    marginTop: 20,
    alignTicks: false
},

这是您的 fiddle 的修改版本:http://jsfiddle.net/brightmatrix/h9j53yk4/9/

请注意，多次单击该按钮将添加新轴的多个实例，这些实例将显示为重复的轴标签。您还在原始 fiddle 的图表选项中多次声明了 yAxis ；我删除了额外的选项。

最后一件事:您会注意到两个轴的网格线并不完全对齐。我在上面引用的问题中 Sualkcin 的答案提供了有关如何处理该问题的信息(请参阅 https://stackoverflow.com/a/23549591/2596103 )。

希望这些信息对您有所帮助。