计算高图的最小y轴值 [英] Calculating a min y axis value in highcharts

问题描述

如果我创建的柱形图的值大于0，但彼此的值比与0接近得多，则生成的图表将具有看起来几乎相同的列.参见此 jsFiddle .

If I create column chart that has values that are > 0 but much closer in value to each other than they are to 0 then the chart generated will have columns that look almost identical. See this jsFiddle.

但是，如果我将图表类型更改为线形，则生成的图表会更好，因为将最小yAxis值计算为非零值，从而使图表上的值分布更加明显.

However if I change the chart type to a line then the resulting chart is much nicer because the min yAxis value is calculated to a non-zero value so that the distribution of the values on the chart is much more obvious.

我可以手动设置一个最小的yAxis值，但是我需要这个值来处理任何数据集，因此需要对其进行计算.柱形图如何实现相同的目的?

I could manually set a min yAxis value but I need this to work for any set of data and so it needs to be calculated. How could I achieve the same thing for a column chart?

推荐答案

我发现Highcharts在哪里计算折线图的最小值(至少对于线性轴).它在getTickPositions()函数中.具体来说，以下几行代码:

I've found where Highcharts calculates the min value for line charts (at least for linear axes). It's in the getTickPositions() function. Specifically these lines of code:

// pad the values to get clear of the chart's edges
if (!categories && !usePercentage && !isLinked && defined(min) && defined(max)) {
    length = (max - min) || 1;
    if (!defined(options.min) && !defined(userMin) && minPadding && (dataMin < 0 || !ignoreMinPadding)) {
        min -= length * minPadding;
    }
    if (!defined(options.max) && !defined(userMax)  && maxPadding && (dataMax > 0 || !ignoreMaxPadding)) {
        max += length * maxPadding;
    }
}

因此它将最小值计算为

length = ([max data value] - [min data value]) || 1
min = [min data value] - length * minPadding

yAxis上minPadding的默认值为0.05，因此

The default for minPadding on the yAxis is 0.05 so

394.5 = 395 - ((405 - 395) * 0.05)

在创建刻度位置时，对394.5进行了四舍五入，因此最终结果为390.

394.5 is rounded when creating the tick positions so the end result is 390.

到目前为止，我想出的是此. (yAxis上的minPadding默认值似乎没有公开，所以我已经对其进行了硬编码)

What I've come up with so far is this. (The minPadding default on the yAxis doesn't seem to be exposed so I've hardcoded it)

var data = [400,405,395];

Array.max = function( array ){
    return Math.max.apply( Math, array );
};
Array.min = function( array ){
    return Math.min.apply( Math, array );
};

var min = Array.min(data);
var max = Array.max(data);

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },
    yAxis: {
        min: min - ((max-min) * 0.05)
    },
    series: [{
        data: data
    }]
});

这篇关于计算高图的最小y轴值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！