我正在尝试使用 Highcharts 库创建一个多轴图表。我可以让 Sentiment 轴正确显示它的标签，但 Number of Responses (Applicable) 轴不显示任何文本标签。
我正在使用的代码是：
$(document).ready(function(e) {
var perShapeGradient = {
x1: 0,
y1: 0,
x2: 0,
y2: 1
};
chart = new Highcharts.Chart({
chart: {
renderTo: 'GraphContainer',
height: 275,
marginTop: 30
},
colors:
[
{
linearGradient: perShapeGradient,
stops:
[
[0, 'rgba(186, 186, 186, 1)'],
[1, 'rgba(232, 232, 232, 0.8)']
]
}
],
title: {
text: null
},
plotOptions: {
line: {
lineWidth: 1,
marker: {
radius: 6,
fillColor: '#fff',
lineColor: '#e10019',
lineWidth: 1.5,
states:
{
hover:
{
radius: 8,
fillColor: '#e10019',
lineColor: '#fff',
lineWidth: 2
}
}
}
}
},
xAxis: {
categories: ['13 May', '20 May'],
title: 'Week Commencing'
},
yAxis: [{
labels: {
endOnTick: true,
formatter: function() {
return this.value + '%';
},
style: {
color: '#e10019',
fontSize: 10
}
},
title: {
text: '% rated as 4 or 5',
rotation: 270,
offset: 75,
style: {
color: '#f49fa8',
fontSize: 11,
fontWeight: 'normal'
}
},
max: 100,
opposite: true
}, {
gridLineWidth: 0,
title: {
text: 'Number of responses',
style: {
color: '#888',
fontSize: 11,
fontWeight: 'normal'
}
},
labels: {
formatter: function()
{
x = this.value.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
},
style: {
color: '#888',
fontSize: 10
}
}
}],
tooltip: {
formatter: function() {
var unit = {
'Applicable': '',
'Sentiment': '%'
}[this.series.name];
return 'Week Commencing ' + this.x +': '+ this.y +' '+ unit;
}
},
legend: {
enabled: false
},
series: [{
name: 'Applicable',
type: 'column',
data: [307, 200]
}, {
color: '#e10019',
name: 'Sentiment',
type: 'line',
data: [44.3, 20]
}]
});
});
我还创建了一个 JS Fiddle：http: //jsfiddle.net/9MrYd/1/