javascript 如何在 Highcharts 中为轴设置静态最小值

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8189921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:36:17  来源:igfitidea点击:

How to set a static minimum value for axes in Highcharts

javascripthighcharts

提问by David Murdoch

I have time-based data that ranges from 1 to 500. Time is plotted on the x axis and the values are on the y axis.

我有范围从 1 到 500 的基于时间的数据。时间绘制在 x 轴上,值绘制在 y 轴上。

When the range between the minimum and maximum data-points is great the y-axis' start label is 0. I can tell Highcharts not to display the label by setting yAxis.startOnTick = false;but that's is not really what I'm after.

当最小和最大数据点之间的范围很大时,y 轴的起始标签为 0。我可以通过设置告诉 Highcharts 不要显示标签,yAxis.startOnTick = false;但这并不是我真正想要的。

Here is a jsfiddleof the problem where you cannot tell if the first point is 0 or some other value. Having 0 here also looks like the min range for y is 0, not 1.

这是您无法判断第一点是 0 还是其他值的问题的 jsfiddle。这里的 0 看起来也像是 y 的最小范围是 0,而不是 1。

Can Highcharts display the first label and the first label should always be set to the minimum value in the dataset (relative to its axis).

Highcharts 能否显示第一个标签,并且第一个标签应始终设置为数据集中的最小值(相对于其轴)。

回答by Mark

I am amazed how difficult this is. Not an optimal solution, but the best I can dream upwith HighChart's api:

我很惊讶这是多么困难。不是最佳解决方案,但我可以用 HighChart 的 api想到最好的解决方案:

var someData = [1,5,82,9,300,5,42,199,5,6,99,1,56,52,250,64];

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },
    yAxis:{
        min: -10,
        tickInterval: 1,
        labels: {
            formatter: function() {
                if (this.value < someData[0])
                    return null;
                else if (this.value == someData[0])
                    return this.value;
                else if (this.value % 50 == 0)
                    return this.value;
            }
        }
    },
    series: [{
        data: someData
    }]

});

enter image description here

在此处输入图片说明

回答by Halvor Holsten Strand

A solution (that optimizes Marks answer) is to use yAxis.labels.formatterwith this.isFirstand this.axis.dataMin, like this:

一个解决方案(优化Marks answer)是yAxis.labels.formatterthis.isFirstand一起使用this.axis.dataMin,如下所示:

yAxis:{
    labels: {
        formatter: function() {
            if(this.isFirst)
                return this.axis.dataMin;
            return this.value;
        }
    }
}

See this JSFiddle demofor an example.

有关示例,请参阅此 JSFiddle 演示

The advantage of this is that you do not have to manually set tickInterval, which saves a lot of calls to formatterand lets Highcharts figure out the label intervals itself. Also, it uses the axis knowledge of the minimum data value, instead of having to check against an array (which you may have to iterate over to find the minimum).

这样做的好处是您不必手动设置tickInterval,这样可以节省大量调用formatter并让 Highcharts 自己计算标签间隔。此外,它使用最小数据值的轴知识,而不是必须检查数组(您可能必须迭代以找到最小值)。

Beware that the yAxis.minmust be set to something sensible here (works best with 0, and positive data). If the y-axis goes far below the minimum datapoint the first label will not be the one at 0.

请注意,yAxis.min必须在此处将 设置为合理的值(最适用于0, 和正数据)。如果 y 轴远低于最小数据点,则第一个标签将不是 0 处的标签。

The this.axisvalue was not available when this question was asked.

this.axis询问此问题时,该值不可用。