3 つの異なるエネルギー コストを表示するハイチャート グラフがあります。凡例を表示することも、軸のタイトルを表示することもできないようです。
凡例にはタイトルが必要です。ガス、電気、石油、それらも軸にある必要があります。
JSFiddle へのリンクは次のとおりです。
http://jsfiddle.net/petenaylor/HHEfW/3/
(function ($) { // encapsulate jQuery
$(function () {
var seriesOptions = [],
yAxisOptions = [],
seriesCounter = 0,
names = ['Electric', 'Oil', 'Gas'],
colors = Highcharts.getOptions().colors;
$.each(names, function (i, name) {
$(function () {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: 100,
borderWidth: 0
},
rangeSelector: {
selected: 12
},
title: {
text: 'Energy Prices'
},
yAxis:[{opposite:false},{opposite:true},{opposite:true,offset:50}],
series: [
{
name: 'Electric',
yAxis:0,
data: [
[1072915200000, 5.73],
[1073001600000, 5.81],
[1073088000000, 5.23],
[1073174400000, 5.32]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Oil',
yAxis:1,
data: [
[1072915200000, 29.73],
[1073001600000, 29.73],
[1073088000000, 29.73],
[1073174400000, 29.73]
],
tooltip: {
valueDecimals: 2
}
}, {
name: 'Gas',
yAxis:2,
data: [
[1072915200000, 0.823],
[1073001600000, 0.82],
[1073088000000, 0.82],
[1073174400000, 0.82]
],
tooltip: {
valueDecimals: 2
}
}
]
});
});
});
});
// create the chart when all data is loaded
function createChart() {
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
formatter: function () {
return (this.value > 0 ? '+' : '') + this.value + '%';
},
style: {
color: '#89A54E'
}
},
title: {
text: 'Electric',
style: {
color: '#89A54E'
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Oil',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#4572A7'
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Gas',
style: {
color: '#AA4643'
}
},
labels: {
formatter: function () {
return this.value;
},
style: {
color: '#AA4643'
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
}
});
})(jQuery);
凡例と軸のタイトルを表示するのを手伝ってくれる人はいますか?
また、凡例はクリック可能である必要があり、クリックすると各行が消えて再表示されます。
助けてくれて本当にありがとうございます
ピート