3

現在、次のチャートをHighchartsに設定しています。

// Initialize the chart when the document loads.
$(document).ready(function() {
    $('#results').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: [
                'Injustice: Gods Among Us ★',
                'Tekken Tag Tournament 2 ★',
                'Super Smash Bros. Melee ★',
                'Persona 4 Arena',
                'King of Fighters XIII',
                'Dead or Alive 5 Ultimate',
                'Street Fighter X Tekken Ver. 2013',
                'Soulcalibur V'
            ],
        }],
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Votes'
            }
        },
        series: [{
            data: [
                {y:1426,color:'#29A329'},{y:823,color:'#29A329'},
                {y:462,color:'#29A329'},{y:305,color:'#CC0000'},
                {y:181,color:'#CC0000'},{y:148,color:'#CC0000'},
                {y:127,color:'#CC0000'},{y:115,color:'#CC0000'}
            ],
            dataLabels: {
                color: '#FFFFFF',
                enabled: true,
                inside: true
            },
            showInLegend: false,
            name: 'Votes'
        }]
    });
});

これにより、次のようなチャートが生成されます。

Y 軸が 1 つのグラフ。

私がやりたいのは、反対側の Y 軸にラベルを付けることです (これは文字列であり、特別なものではありません)。

次のコードを追加することで、空のデータ ポイントを含む別のシリーズを追加し、必要なラベルを取得できます (この効果を得るために、サーバー側から Javascript をページに書き込んでいます)。

// Initialize the chart when the document loads.
$(document).ready(function () {
    $('#results').highcharts({
        chart: {
            type: 'bar'
        },
        title: {
            text: ''
        },
        xAxis: [{
            categories: [
                'Injustice: Gods Among Us ★', 
                'Tekken Tag Tournament 2 ★', 
                'Super Smash Bros. Melee ★', 
                'Persona 4 Arena', 
                'King of Fighters XIII', 
                'Dead or Alive 5 Ultimate', 
                'Street Fighter X Tekken Ver. 2013', 
                'Soulcalibur V'
         ],
        }, {
            categories: [
                '8/5/2013 8:59 PM',
                '8/5/2013 12:59 PM',
                '8/5/2013 2:59 PM',
                '8/5/2013 6:59 PM',
                '8/5/2013 12:59 AM',
                '8/5/2013 3:59 PM',
                '8/5/2013 8:23 PM',
                '8/5/2013 8:19 PM'],
            opposite: true,
            title: {
                text: 'Last vote cast at'
            }
        }],
        yAxis: {
            allowDecimals: false,
            title: {
                text: 'Votes'
            }
        },
        series: [{
            data: [{
                y: 1426,
                color: '#29A329'
            }, {
                y: 823,
                color: '#29A329'
            }, {
                y: 462,
                color: '#29A329'
            }, {
                y: 305,
                color: '#CC0000'
            }, {
                y: 181,
                color: '#CC0000'
            }, {
                y: 148,
                color: '#CC0000'
            }, {
                y: 127,
                color: '#CC0000'
            }, {
                y: 115,
                color: '#CC0000'
            }],
            dataLabels: {
                color: '#FFFFFF',
                enabled: true,
                inside: true
            },
            showInLegend: false,
            name: 'Votes',
            xAxis: 1
        }, {
            data: [0, 0, 0, 0, 0, 0, 0, 0],
            showInLegend: false
        }]
    });
});

jsフィドル

これは、私が望むものとほぼ同じです。ただし、表示されることを意図していない偽のデータシリーズに対応するためにスペースが作成されたため、バーが細くなっています。

グラフ内の複数の系列、データのない系列

問題は、これらの副作用なしで右側にラベルを取得するにはどうすればよいですか? 2 番目のデータ シリーズは必ずしも必要ではないことに注意してください。バーが正常に表示される限り、右側の値が書き込まれるメカニズムは気にしません。

4

1 に答える 1

7

リンクされた軸が必要ですhttp://jsfiddle.net/U5Dhw/

xAxis: [{
            categories: ['Injustice: Gods Among Us ★', 'Tekken Tag Tournament 2 ★', 'Super Smash Bros. Melee ★', 'Persona 4 Arena', 'King of Fighters XIII', 'Dead or Alive 5 Ultimate', 'Street Fighter X Tekken Ver. 2013', 'Soulcalibur V'],
        },
        {
        categories: ['Fred', 'Tom', 'Bill', 'David', 'Nathan', 'Charles', 'Mike', 'Andrew'],
            linkedTo: 0,
            opposite: true
        }],

http://api.highcharts.com/highcharts#xAxis.linkedTo

于 2013-08-07T18:14:54.090 に答える