動態Ajax加載條形圖不顯示

我正在努力使Highcharts條形圖一起動態地隨Ajax調用而變化。我想我真的很接近想出來，但它沒有顯示，我沒有看到問題。我相信我可以按照我在setInterval函數內完成的方式更新點。我希望有人可以眼球它給我的建議...非常感謝動態Ajax加載條形圖不顯示

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>Highcharts Example</title> 

<script type="text/javascript" src="jquery-1.8.2.min.js"></script> 
<script type="text/javascript"> 
<!--Ajax Function--> 
var flag = 1; 
var xmlhttp; 
var url="http://mysite.com/web/ajax_info.txt"; 
//ajax call 
function loadXMLDoc(url, cfunc){ 
    if(window.XMLHttpRequest){ 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else { 
     xmlhttp=new ActiveObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=cfunc; 
    xmlhttp.open("GET",url, true); 
    xmlhttp.send(); 
} 

function myFunction(){ 
    loadXMLDoc(url+'?_dc='+(new Date()).getTime(), function(){ 
     if(xmlhttp.readyState==4 && xmlhttp.status==200){ 
     flag = 1; 
     } 
    }); 
} 

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column' 
      }, 
      title: { 
       text: 'Active Tribble Sales' 
      }, 
      subtitle: { 
       text: 'Source: TribbleInternational.com' 
      }, 
      xAxis: { 
       categories: [ 
        'Tribbles' 
       ] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Active Sales (%)' 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       backgroundColor: '#FFFFFF', 
       align: 'left', 
       verticalAlign: 'top', 
       x: 100, 
       y: 70, 
       floating: true, 
       shadow: true 
      }, 
      tooltip: { 
       formatter: function() { 
        return ''+ 
         this.x +': '+ this.y +' mm'; 
       } 
      }, 
      plotOptions: { 
       column: { 
        pointPadding: 0.2, 
        borderWidth: 0 
       } 
      }, 
      series: [{ 
        name: 'Good', 
        data: [80] 

       }, { 
        name: 'Bad', 
        data: [1] 
       }] 
}, 

function(chart){ 
      setInterval(function() { 
       myFunction(); 
       if(flag == 1){ 
        var point = chart.series[0].points[0], 
        var point2 = chart.series[1].points[0], 
        newVal, 
        inc = Math.round((Math.random() - .5) * 20); 

        newVal = point.y + inc; 
        if (newVal < 0 || newVal > 100) { 
         newVal = point.y - inc; 
        } 
        point.update(newVal); 
        point2.update(1); 
       } 
       else{ 
       var point2 = chart.series[0].points[0], 
        var point = chart.series[1].points[0], 
        newVal, 
       inc = Math.round((Math.random() - .5) * 20); 

        newVal = point2.y + inc; 
        if (newVal < 0 || newVal > 100) { 
         newVal = point2.y - inc; 
        } 
       point2.update(newVal); 
        point.update(1); 
       } 
     flag = 0; //reset flag after point update. 
      }, 3000); 
     }); 
}); 

</script> 
    </head> 
    <body> 
<script src="highcharts.js"></script> 

<div id="container" style="min-width: 300px; max-width: 300px; height: 400px; margin: 0 auto"></div> 

</body> 
</html>

來源

2013-03-20 Psyllex

你能告訴我什麼是不工作嗎？初始圖形加載？調用SetInterval的內部函數（使用console.log（'test'）檢查）。控制檯中是否有錯誤？ – 2013-03-21 12:21:09

檢查語法即括號正確關閉

爲我注意到

 series: [{ 
       name: 'Good', 
       data: [80] 

      }, { 
       name: 'Bad', 
       data: [1] 
      }]

}，

應}）
因爲// CH技術=新Highcharts.Chart（{

和

  } 
    flag = 0; //reset flag after point update. 
     }, 3000); 
     // } is missing 
    });

}）;

請檢查一下

來源

2013-03-21 11:54:58

我之前在發佈前測試過。並添加}）沒有任何影響。我想我必須在這裏錯過一系列更新或更新。我將不得不閱讀庫文檔。 – Psyllex 2013-03-21 18:15:40

動態Ajax加載條形圖不顯示

回答

相關問題