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

时间:2011-11-18 22:24:52

标签: javascript highcharts

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

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

问题的

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

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

2 个答案:

答案 0 :(得分:10)

我很惊讶这是多么困难。不是最佳解决方案,而是具有HighChart api的最佳I can dream up

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

答案 1 :(得分:3)

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

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

有关示例,请参阅this JSFiddle demo

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

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

当询问此问题时,this.axis值无效。