私はハイチャートの初心者です。Java サーバー側の JSON リストから読み取る複数のシリーズを作成しています。JSON オブジェクトは複数のシリーズで構成され、各シリーズには「電気 IRms」があり、その後に「温度」が 2 つの Y 軸ラベルにマッピングされます。
私が遭遇した問題は、2番目のY軸ユニットが表示されないことです。JSON リスト形式は次のとおりです。
{name, "serialNumber1_type1", {"data", [[timestamp1, value1],
[[timestamp2, value2], ...
{name, "serialNumber1_type2", {"data", [[timestamp1, value1],
[[timestamp2, value2], ...
{name, "serialNumber2_type1", {"data", [[timestamp1, value1],
[[timestamp2, value2],
{name, "serialNumber2_type2", {"data", [[timestamp1, value1],
...
{"title","HighCharts Title"}
たとえば、私のJSONリスト
[{"name":"5004672_IRms"},{"data":[[1373958000000,53],[1373958300000,53]....
{"name","5004672_Temperature"},{"data":[[1373958000000,80],[1373958300000,81]....
{"name":"5004687_IRms"},{"data":[[1373958000000,54],[1373958300000,53]..
{"name","5004687_Temperature"},{"data":[[1373958000000,82],[1373958300000,83]...
....
{"title", "HighCharts_Title"}
]
以下の私のコード
$(function() {
var titleName='';
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
rangeSelector : {
{
type: 'day',
count: 1,
text: '1 d'
},{
type: 'week',
count: 1,
text: '1 wk'
}, {
type: 'all',
text: 'all'
}],
selected: 1
},
title: {
text: '(IRms & Temperature)'
},
xAxis: {
title: {
text: 'Time (UTC)'
},
type: 'datetime',
labels: {
align: 'left',
formatter: function() {
return Highcharts.dateFormat('%I:%M %P', this.value);
}
},
gridLineDashStyle: 'dot',
gridLineWidth: 1,
tickInterval: 60 * 60 * 1000,
lineWidth: 2,
lineColor: '#92A8CD',
tickWidth: 3,
tickLength: 6,
tickColor: '#92A8CD',
},
yAxis: [{
labels: {
formatter: function() {
return this.value;
}
},
title: {
text: ''
},
opposite: true
},
{
gridLineWidth: 0,
title: {
text: '',
style: {
color: '#4572A7'
}
},
labels: {
formatter: function() {
return this.value +'°F';
}
}
}
],
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
...
width: 200
});
sname = this.series.name;
$.getJSON('/em/em/historypointdetail?pointid=' + sname, function(response) {
......
});
}
}
},
marker: {
lineWidth:
}
},
series: []
};
var serialNumber;
$.getJSON('/em/em/lli?id=<c:out value="${elementIds}" />',function(data) {
$.each(data, function(key,value) {
$.each(value, function(key,val) {
if (key == 'name') {
serialNumber = val;
}
else if (key == 'data') {
var dataseries = { data: []};
$.each(val, function(key,val) {
dataseries.data.push(val);
});
dataseries.name=serialNumber;
var names = serialNumber.split('_');
if (names[1] == 'IRms') {
options.title.text = 'Current';
options.series.yAxis = 0;
options.yAxis[0].title.text = 'Current';
}
else if (names[1] == 'Temperature') {
options.title.text = 'Temperature';
options.series.yAxis = 1;
options.yAxis[1].title.text = 'Temperature';
}
options.series.push(dataseries);
}
else if (key == 'title') {
htext = val;
}
});
});
chart = new Highcharts.StockChart(options);
chart.setTitle({text: htext});
}).error(function() {console.log('error');});
2 つの Y 軸と 2 番目の Y 軸を作成し、ラベルが this.value + "F" を返すようにしました。ただし、チャート描画時に 2 番目の Y 軸ラベルは表示されません。
ありがとう