highcharts通过JSON获取数据？ [英] highcharts get data by JSON?
问题描述
我想通过getJSON方法将数据传递给highcharts：
I want to pass data to highcharts by getJSON method:
<script type="text/javascript">
var chart;
$(document).ready(function(){
$("#datepicker1").datepicker({showOn: 'button', buttonImage: 'css/base/images /calendar.gif', buttonImageOnly: true,dateFormat: "yy-mm-dd"});
});
function draw_chart(){`
var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
chart=new Highcharts.Chart({});
$.getJSON(url,function(data1){
var options={
chart: {
renderTo: 'container',
type: 'line'
},
xAxis:{
type: 'datetime'
},
yAxis: {
title: {
text: 'test'
}
},
series:[{
data:data1.result[0].dayactivity,
name: "name"
}]
};
var chart = new Highcharts.Chart(options);
});
}
</script>
</head>
<body>
<div >
<input type="text" id="datepicker1" name="date1" onchange='draw_chart()' >
</div>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
data1.result [0] .dayactivity
[[1356796800,0.0],[1356883200,16.1],[1356969600,0.0],[1357056000,0.0],[1357142400,15.0]],
当我把这个值直接放到 options.series [0] .data ，它可以工作，但是当我将它传递给getJSON时，它不会。图表是空的。它似乎首先执行 var chart = new Highcharts.Chart（options）; 。我该如何解决这个问题？感谢。
when i put this value directly to options.series[0].data, it works, but when i pass it throuth getJSON, it does not. The chart is empty. It seems that it executes var chart = new Highcharts.Chart(options); first. How can i solve this? thanks.
推荐答案
您需要将 Chart 的创建成功 $。getJSON（）; 的回调您只需实例化并创建 Chart 一次，那将在回调函数中。
You need to move the creation of the Chart within the success callback of $.getJSON(); You only have to instantiate and create the Chart once and that will be within the callback function.
function draw_chart() {
var url="http://localhost/handle_data.php?start=2012-12-30&end=2013-01-04";
$.getJSON(url,
function(data1){
/** Declare options after success callback. */
var options={
chart: {
renderTo: 'container',
type: 'line'
},
xAxis:{
type: 'datetime'
},
yAxis: {
title: { text: 'test'}
},
series:[{
data:data1.result[0].dayactivity,
name: "name"
}]
};
/** Create a chart instance and pass options. */
var chart = new Highcharts.Chart(options);
}
);
}
这篇关于highcharts通过JSON获取数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
