Question

如果我创建的列图表的值为＆gt; 0但是它们彼此之间的值相近于0，那么生成的图表将具有看起来几乎相同的列。见jsFiddle。

但是，如果我将图表类型更改为一行，则生成的图表会更好，因为最小yAxis值计算为非零值，因此图表上的值分布更加明显。

我可以手动设置min yAxis值但是我需要这个来处理任何数据集，因此需要计算它。我怎样才能为柱形图实现同样的目的呢？

Answer 1

我发现Highcharts计算折线图的最小值（至少对于线性轴）。它位于getTickPositions（）函数中。特别是这些代码行：

// 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;
    }
}

因此它将min计算为

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

yAxis上minPadding的默认值是0.05，所以

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

创建刻度线位置时，

394.5会四舍五入，因此最终结果为390。

到目前为止，我提出的是this。（yAxis上的minPadding默认值似乎没有公开，所以我已经硬编码了）

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

Answer 2

尝试设置yAxis值，例如：

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container',
        defaultSeriesType: 'column'
    },

    yAxis: {
       min: 390,
       startOnTick: false
    },

    series: [{
        data: [400,405,395]
    }]
});

您还可以将其设置为javascript中的某种动态值（例如AVG（400,405,395） - 10％），这样可以给它足够的比例。

更新的JSFiddle是here。

在highcharts中计算最小轴值

2 个答案: