highcharts通過JSON獲取數據？

我想的getJSON方法將數據傳遞給highcharts：highcharts通過JSON獲取數據？

<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，它的工作原理，但是當我通過它throuth getJSON，它沒有。圖表是空的。它似乎首先執行var chart = new Highcharts.Chart(options);。我該如何解決這個問題？謝謝。

來源

2013-02-02 user1611237

您需要將success回調$.getJSON();內移動Chart的創作，你只需要實例化和創建Chart一次，這將是中回調函數。

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); 
     } 
    ); 
}

來源

2013-02-02 04:20:42

OP的代碼是相同的，格式不對，問題是他運行'new Highcharts.Chart（{}）;'太早 –

是的，它是相同的代碼。如何讓它運行新的Highcharts.Chart（{}）有點晚？如果我把它寫在$ .getJSON之外，options變量將不會被定義。任何想法？ – user1611237

'選項'是在回調函數中定義的，因此如果像上面那樣運行圖表，它應該可以工作。 –

您初始化了高圖，在獲取數據之前，這是固定的腳本，我評論了更改的行。

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({}); //PROBLEM ONE - empty initialisation 

    $.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); // removed var here, as it looks you want it to be global 
     chart = new Highcharts.Chart(options); 
    }); 
} 
draw_chart();

Demo沒有JSON，但你可以看到問題

來源

2013-02-02 04:20:19

好的。感謝eicto，我發現這個問題，這不是因爲var。我在系列添加eval：[數據：eval（data1.result [0] .dayactivity），名稱：「名稱」 }]。現在它工作了！ – user1611237

如果我不結婚，我會吻你並要求你嫁給我！我在尋找解決方案，爲什麼數據不會出現在我的圖表上，EVAL就是答案。謝謝謝謝謝謝:) – Radek

@ user1611237：謝謝至少你在評論中提到解決方案。它也解決了我的問題。我認爲你應該加上這個作爲答案:) – Roopendra

highcharts通過JSON獲取數據？

回答

相關問題