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 轴图表。

我想做的是在另一侧的 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

这让我几乎得到我想要的东西,除了一件事,条形现在更薄了,因为空间被用来容纳不打算显示的假数据系列:

图表中有多个系列,其中一个没有数据

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

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 回答