Highcharts添加额外的系列和轴中断现有yAxis最小/最大 [英] Highcharts adding additional series and axis breaks existing yAxis min/max

问题描述

在下面的小提琴中（基于Highcharts的例子），第一个系列显示正确，占据了整个图表的高度。

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

然而，当你点击按钮添加一个系列时，现有系列的比例尺会被重新计算（不是我想要的）。

我使用的代码添加axis / series / data：

  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组合如何设置为保持原有状态，并将新系列绘制在ontop上（也可缩放为使用图表的整个高度）

更新

根据Mike的回答，我不得不这样做做的只是：

  alignTicks：false 
  

解决方案

使用多轴可能会非常棘手。我在这个Stack Overflow问题中找到了 kjfagan 的答案对您的情况有帮助： Highcharts Y轴天花板没有被尊重。

我在你的小提琴中所做的只是首先设定了初始的y轴，它是根据kjfagan的回答 minPadding：0 和 maxPadding：0 属性。

  yAxis：[{
 visible：true，
 startOnTick：false，
 endOnTick：false，
 maxPadding：0 ，
 minPadding：0 
}]，
  

接下来，事件中，我在这里设置了新轴的全部属性，包括 minPadding 和 maxPadding 属性： $ b $ $ $ $ $ $'$ $ $'$'$'$'$' ：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）;
}）;

最后，正如 GrzegorzBlachliński深思熟虑，我增加了<$ c

另外，我添加了 alignTicks：false c>以防止图表自动调整坐标轴到彼此的值，这可能导致一些不可预料的或意想不到的行为，这取决于您正在绘制的图形。

<$ p $ 图表：{
marginTop：20，
alignTicks：false
}，


以下是您的小提琴的修改版本： http：// jsfiddle.net/brightmatrix/h9j53yk4/9/

请注意，多次点击按钮会添加新轴的多个实例，作为重复的轴标签。您还有 yAxis 在原始小提琴的图表选项中多次声明;我删除了额外的选项。

最后一件事：您会注意到来自两个轴的网格线不太齐整。在上面引用的问题中，来自 Sualkcin 的答案提供了有关如何处理该问题的信息（请参阅 https：//

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

In the following fiddle (based on a Highcharts example), the first series shows correctly, taking up the entire height of the chart.

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

However, when you click the button to add a series, the existing series' scale is recalculated (not what I want).

The code I use to add the axis/series/data:

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],
    })

How can the existing series/yAxis combo be set to remain as it was originally and just have the new series plotted ontop (also scaled to use the entire height of the chart)

Update

As per Mike's answer, what I had to do was simply:

alignTicks: false

解决方案

Working with multiple axes can be tricky. I found the answer by kjfagan in this Stack Overflow question helpful for your situation: Highcharts y-axis Ceiling not being respected.

What I did in your fiddle was first set only the initial y-axis and give it the minPadding: 0 and maxPadding: 0 attributes as per kjfagan's answer:

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

Next, in your buttion, event, I set the full set of attributes for the new axis here, including the minPadding and maxPadding attributes:

$('#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);
});

Lastly, as Grzegorz Blachliński thoughtfully suggested, I increased your marginTop for the chart itself.

In addition, I added alignTicks: false to prevent the chart from automatically adjusting the axes to one another's values, which can lead to some wonky or unexpected behavior, depending on what you're plotting.

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

Here's the modified version of your fiddle: http://jsfiddle.net/brightmatrix/h9j53yk4/9/

Please note that clicking the button more than once will add multiple instances of the new axis, which will appear as duplicate axis labels. You also had yAxis declared more than once in the chart options of your original fiddle; I removed the extra option.

One last thing: you'll notice the gridlines from both axes don't quite line up. The answer from Sualkcin in the question I cited above has information on how to handle that (see https://stackoverflow.com/a/23549591/2596103).

I hope this information is helpful for you.

这篇关于Highcharts添加额外的系列和轴中断现有yAxis最小/最大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！