我在针对JSON(实际上是JSONP)更新Highcharts折线图时非常费劲。我只是没有让jQuery代码与我的数据和图形一起使用。
我从服务器端PHP收到了一个(可能的,格式可能不同)响应,如下所示:
[{ "name": "France",
"data": [[1960,520325],
[1961,548976],
[1962,585604],
...
]
},{"name": "Germany",
"data": [[1960,62718],
[1961,83872],
[1962,99201],
...
]
},{"name": ...
客户端如下所示:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: []
};
var url = "http://xxx/jsonp_response.php?callback=?";
$.getJSON(url, {selectedCountries: "France,Germany,Switzerland", type: "jsonp"})
.done(function(data)
{
// Split the data string into "name" and "data"
$.each(data, function(name, values)
{
var items = values.toString().split(",");
//now, name is for category
options.series[].name = name;
$.each (items, function(year, value)
{
// now, categories
options.xAxis.categories = year;
// now, values
options.series[].data = value;
});
});
var chart = new Highcharts.Chart(options);
})
事情可能比这容易得多。但是我尝试了许多不同的方法,其中许多是在搜索中找到的,但徒劳无功。感谢您的任何提示。
感谢Sebastian的声明,我重新设计了PHP,该PHP生成了JSON以及客户端,并且运行良好。对于其他有相同问题的人,这里是正确的代码:
可以使用JSONlint验证JSON 。
服务器端:
$values = array();
$values[] = array(2000,20);
$values[] = array(2001,10);
$values[] = array(2002,12);
$data[] = array("name" => "Germany", "data" => $values);
unset($values);
$values[] = array(2000,8);
$values[] = array(2001,4);
$values[] = array(2002,10);
$data[] = array("name" => "France", "data" => $values);
header("content-type: application/json");
echo $_GET['callback']. '('. json_encode($data) . ')';
客户端:
<body>
<div id="container" style="width: 600px; height: 400px;"></div>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
var url = "http://xxx/jsonp_response.php?callback=?";
$.getJSON(url, {selectedCountries: "Germany,France", type: "jsonp"})
.done(function(data)
{
options.series = data;
var chart = new Highcharts.Chart(options);
})
.fail(function(jqxhr, textStatus, error)
{
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
})
});
</script>
</body>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句