javascript - 如何在没有第二个系列的情况下将标签放在 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'
        }]
    });
}); 

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

• Live example.
• 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