如何在没有第二个系列的情况下在Highchart中的相对Y轴上放置标签

Question

我目前在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'
        }]
    });
}); 

这会生成一个如下所示的图表:

• 实例.
• 的jsfiddle

我想做的是在对面的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
        }]
    });
});

的jsfiddle

这让我几乎完全符合我的要求,除了一件事,现在条形更细,因为空间是为了容纳不打算显示的假数据系列:

问题是,如何在没有这些副作用的情况下获得右侧的标签？请注意,我不一定需要第二个数据系列,它只是关闭我已经找到了解决方案.只要条形图正常显示,我就不介意在右侧写入这些值的机制.

Answer 1

你想要一个链接轴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