1

値が0より大きいが、値が0よりもはるかに近い縦棒グラフを作成すると、生成されるグラフの列はほぼ同じになります。このjsFiddleを参照してください。

ただし、グラフの種類を線に変更すると、最小yAxis値がゼロ以外の値に計算され、グラフ上の値の分布がはるかに明確になるため、結果のグラフははるかに優れています。

最小のyAxis値を手動で設定することもできますが、これが任意のデータセットで機能するために必要であるため、計算する必要があります。棒グラフで同じことをどのように達成できますか？

4

2 に答える 2

4

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

したがって、最小値を次のように計算します

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になります。

私がこれまでに思いついたのはこれです。（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
    }]
});
于 2012-04-19T06:48:19.013 に答える
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 はこちらです。</p>

于 2012-04-19T06:26:28.857 に答える