1

ここでの答えに満足できませんでした: ハイチャートの列グラフ カテゴリの複数の y 軸

シリーズごとに yAxis:0,1,2 などを使用して複数の y 軸を選択できることを理解しています。棒グラフのグループに対してこれを行うことは可能ですか?

次の例では、それぞれ 4 人 (John、Joe、Jane、Janet) を持つ 3 つのグループ (Count A、Count B、Percent) が必要です。1 つの軸にカウント グループを、もう 1 つの軸にパーセント グループを配置することに加えて、どうすればよいでしょうか?

$('#container').highcharts({
    chart: { type: 'column' },
    xAxis: { categories: ['Count A', 'Count B', 'Percent']},
    yAxis: [{ title: { text: 'Count' } }, { title: { text: 'Percent' }, opposite: true }],

    series: [{
        name: 'John',
        data: [5, 3, 0.4],
    }, {
        name: 'Joe',
        data: [3, 4, 0.6],
    }, {
        name: 'Jane',
        data: [2, 5, 0.7],
    }, {
        name: 'Janet',
        data: [3, 0, 0.8],
    }]
});
4

2 に答える 2

1

はい、これは絶対に可能であり、複数の y 軸の研究で正しい軌道に乗っていました。

以下は、積み上げおよびグループ化された列の Highcharts のデモに基づくコード スニペットです。2 つ目の Y 軸を追加し、デモ データの一部をコピーしてその軸に割り当てました。

要件に応じて、データの 2 つのセット (スタック) が最初の既定の y 軸に割り当てられ、3 番目のセットが 2 番目の反対側の y 軸に割り当てられます。

$(function () {
    $('#container').highcharts({

        chart: {
            type: 'column'
        },

        title: {
            text: 'Total fruit consumtion, grouped by gender'
        },

        xAxis: {
            categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
        },

        yAxis: [{
            allowDecimals: false,
            min: 0,
            title: {
                text: 'Number of fruits'
            }
        },{
            allowDecimals: false,
            min: 0, max: 100,
            title: {
                text: 'Percentage of fruits'
            },
            opposite: true
        }],

        tooltip: {
            formatter: function () {
                return '<b>' + this.x + '</b><br/>' +
                    this.series.name + ': ' + this.y + '<br/>' +
                    'Total: ' + this.point.stackTotal;
            }
        },

        plotOptions: {
            column: {
                stacking: 'normal'
            }
        },

        series: [{
            name: 'John',
            data: [5, 3, 4, 7, 2],
            stack: 'number'
        }, {
            name: 'Joe',
            data: [3, 4, 4, 2, 5],
            stack: 'number'
        }, {
            name: 'Jane',
            data: [2, 5, 6, 2, 1],
            stack: 'number2'
        }, {
            name: 'Janet',
            data: [3, 0, 4, 4, 3],
            stack: 'number2'
        },{
            name: 'John',
            data: [45, 30, 25, 70, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Joe',
            data: [25, 15, 40, 5, 5],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Jane',
            data: [10, 50, 30, 5, 10],
            stack: 'percentage',
            yAxis: 1
        }, {
            name: 'Janet',
            data: [20, 5, 5, 20, 80],
            stack: 'percentage',
            yAxis: 1
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 250px; margin: 0 auto"></div>

1 つのアドバイス: さまざまな軸の折れ線グラフと同様に、ユーザーがどの値がどの軸に対応しているかをユーザーが認識できるように、ドキュメント、色の選択、またはグラフのラベルを明確にする必要があります。ユーザーは自然に各列の高さを隣接する列と比較するため、これは列の場合に特に必要です。

これがお役に立てば幸いです。

于 2016-08-11T11:17:21.893 に答える