Javascript 动态加载Ajax的条形图不显示_Javascript_Jquery_Ajax_Highcharts

Javascript 动态加载Ajax的条形图不显示

javascript jquery ajax highcharts

Javascript 动态加载Ajax的条形图不显示,javascript,jquery,ajax,highcharts,Javascript,Jquery,Ajax,Highcharts,我正致力于通过Ajax调用将Highcharts条形图与动态变化结合起来。我想我真的很快就明白了，但是它没有显示出来，我也没有看到问题所在。我相信我可以像在setInterval函数中那样更新点。我希望有人能看一下，给我一些建议…非常感谢 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

我正致力于通过Ajax调用将Highcharts条形图与动态变化结合起来。我想我真的很快就明白了，但是它没有显示出来，我也没有看到问题所在。我相信我可以像在setInterval函数中那样更新点。我希望有人能看一下，给我一些建议…非常感谢

<!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>


海图示例
var标志=1；
var-xmlhttp；
变量url=”http://mysite.com/web/ajax_info.txt";
//ajax调用
函数loadXMLDoc（url，cfunc）{
if（window.XMLHttpRequest）{
xmlhttp=新的XMLHttpRequest（）；
}
否则{
xmlhttp=新的ActiveObject（“Microsoft.xmlhttp”）；
}
onreadystatechange=cfunc；
open（“GET”，url，true）；
xmlhttp.send（）；
}
函数myFunction（）{
loadXMLDoc（url+'？_dc='+（新日期（））.getTime（），函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
flag=1；
}
});
}
$（函数（）{
var图；
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
类型：“列”
},
标题：{
文本：“活动Tribble销售”
},
副标题:{
文本：“来源：TribbleInternational.com”
},
xAxis：{
类别：[
“Tribbles”
]
},
亚克斯：{
分:0,，
标题：{
正文：“活跃销售额（%）”
}
},
图例：{
布局：“垂直”，
背景颜色：“#FFFFFF”，
对齐：“左”，
垂直排列：“顶部”，
x:100，
y:70，
浮动：是的，
影子：对
},
工具提示：{
格式化程序：函数（）{
返回“”+
this.x+'：'+this.y+'mm'；
}
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
系列：[{
名字：'好'，
数据：[80]
}, {
名字：“坏”，
数据：[1]
}]
},
功能（图表）{
setInterval（函数（）{
myFunction（）；
如果（标志==1）{
变量点=图表。系列[0]。点[0]，
var point2=图表.系列[1].点[0]，
纽瓦尔，
inc=数学四舍五入（（数学随机数（）-.5）*20）；
newVal=点y+inc；
如果（newVal<0 | | newVal>100）{
newVal=point.y-inc；
}
更新点（newVal）；
第2点：更新（1）；
}
否则{
var point2=chart.series[0]。points[0]，
变量点=图表。系列[1]。点[0]，
纽瓦尔，
inc=数学四舍五入（（数学随机数（）-.5）*20）；
newVal=point2.y+inc；
如果（newVal<0 | | newVal>100）{
newVal=point2.y-inc；
}
点2.更新（newVal）；
更新（1）；
}
flag=0；//点更新后重置标志。
}, 3000);
}); 
});

检查语法，即大括号是否正确闭合

至于我注意到的

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

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

}，

应该是}）
自// 图表=新的高点图表。图表({

及

}))

请检查一下

你能告诉我到底是什么不起作用吗？初始图形加载？调用了SetInterval的内部函数（使用console.log（'test'）进行检查）。您在控制台中有任何错误吗？我在发布之前已经测试过了。添加}）没有任何效果。我想我一定是错过了一个系列的更新或者什么的。我必须阅读图书馆的文档。

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