ハイチャートで AJAX クエリを介して動的にチャートを更新しようとしています。現在、新しいグラフの JSON を返すサーバーがあり、それを parseJSON を使用して解析しています。これはすべて問題ありませんが、1 つだけ例外があります。ハイチャート コードの通常の形式は真の JSON ではないため、ファイル内のチャートの形式が異なります。(たとえば、適切な JSON では、type: 'bar' を "type": "bar" にする必要があります。)
メインページのコードは次のとおりです。
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
$(function () {
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20,
style: {
color: 'rgb(103,103,103)',
fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif'
}
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20,
style: {
color: 'rgb(103,103,103)'
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
title: {
text: 'Temperature (C)',
style: {
color: 'rgb(103,103,103)'
}
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Tokyo',
color: 'rgb(62,144,200)',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
point: {
events: {
click: function() {
$.get('thetest/test.php', function (data) {
var temp=jQuery.parseJSON(data);
$('#container').highcharts(temp);
})
}
}
}
}, {
name: 'New York',
color: 'rgb(128,183,101)',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
}, {
name: 'Berlin',
color: 'rgb(145,111,79)',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
}, {
name: 'London',
color: 'rgb(207,186,132)',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}, {
name: 'Last One',
color: 'rgb(70,95,119)',
data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8]
}]
});
});
</script>
返される JSON は次のとおりです。
{
"chart": {
"type": "bar"
},
"title": {
"text": "Historic World Population by Region"
},
"subtitle": {
"text": "Source: Wikipedia.org"
},
"xAxis": {
"categories": ["Africa", "America", "Asia", "Europe", "Oceania"],
"title": {
"text": null
}
},
"yAxis": {
"min": 0,
"title": {
"text": "Population (millions)",
"align": "high"
},
"labels": {
"overflow": "justify"
}
},
"tooltip": {
"valueSuffix": " millions"
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": true
}
}
},
"legend": {
"layout": "vertical",
"align": "right",
"verticalAlign": "top",
"x": -40,
"y": 100,
"floating": true,
"borderWidth": 1,
"backgroundColor": "#FFFFFF",
"shadow": true
},
"credits": {
"enabled": false
},
"series": [{
"name": "Year 1800",
"data": [107, 31, 635, 203, 2]
}, {
"name": "Year 1900",
"data": [133, 156, 947, 408, 6]
}, {
"name": "Year 2008",
"data": [973, 914, 4054, 732, 34]
}]
}
もちろん、これは完全に機能します...しかし、JSONではなく標準の「ハイチャート」形式でtest.phpから結果を返す方法はありますか?