Question

我正在努力将一个Highcharts条形图与Ajax调用一起动态更改。我想我真的很接近搞清楚，但它没有显示，我没有看到问题。我相信我可以在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>

Answer 1

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

至于我注意到了

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

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

<强>}，

应该是}）
自// chart = new Highcharts.Chart（{

和

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

}）;

请检查

动态Ajax加载条形图不显示

1 个答案: