我目前在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轴上有标签(这是一个字符串,没什么特别的。)
我可以使用空数据点添加另一个系列,并获取我想要的标签(我正在从服务器端将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
}]
});
});
这让我几乎完全我想要的东西,除了一件事,酒吧现在更薄了,因为空间是为了容纳不打算显示的假数据系列:< / p>
问题是,如何在没有这些副作用的情况下获得右侧的标签?请注意,我不一定需要第二个数据系列,它只是关闭我已经找到了解决方案。只要条形图正常显示,我就不介意右边那些值的写入机制。
答案 0 :(得分:6)
您想要一个链接轴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
}],