0

我一直在使用 Highcharts 车速表。我已经设置它来检查服务器是否已启动，如果是，则在速度表中显示一个随机数。如果服务器关闭，则在速度表中显示 0。我已经让它工作了（大部分）。我加载它，运行 Firebug。我关闭了 Apache 服务器，它降到了零。我启动服务器备份，它又回到运行随机数。问题是当我在没有运行firebug的情况下运行它时……javascript似乎没有触发，因为它只是保持为零。一旦我再次启动萤火虫......它再次开始显示随机数。有没有人有任何想法？ 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" >
        <title>Sales Meter</title>

        <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
        <script type="text/javascript">
var flag;
var xmlhttp;
var url="http://192.168.0.5/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;
      }
      else {
         flag = 0;
      }
   });
}

$(function () {

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Sales-O-Meter'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 2.5,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 15,
            tickWidth: 1,
            tickPosition: 'inside',
            tickLength: 5,
            tickColor: '#666',
            labels: {
                step: 5,
                rotation: 'auto'
            },
            title: {
                text: 'sales/min'
            },
            plotBands: [{
                from: 0,
                to: 10,
                color: '#DF5353' // green
            }, {
                from: 10,
                to: 20,
                color: '#DDDF0D' // yellow
            }, {
                from:20,
                to: 100,
                color: '#55BF3B' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' sales/sec'
            }
        }]

    }, 
    // Add some life
    function (chart) {
        setInterval(function () {
                   myFunction();
                   if(flag == 1){
               var point = chart.series[0].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);
                }
                else{

                   var point = chart.series[0].points[0],
                      newVal=0,
                      inc = 0;
                   point.update(0);
                }
        }, 1000);
    });
});

        </script>
    </head>
    <body>
<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->

<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>

    </body>
</html>

提前致谢！

4

1 回答 1

0

好吧，我想通了。当我实例化它时，我需要将标志设置为零（Javascript中是否有实例化变量？）。然后我需要在 point.update() 之后将标志重置为零。这解决了问题。这是代码，如果有人感兴趣。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<title>Sales Meter</title>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var flag = 0;
var xmlhttp;
var url="http://192.168.0.5/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 = new Highcharts.Chart({

        chart: {
            renderTo: 'container',
            type: 'gauge',
            plotBackgroundColor: null,
            plotBackgroundImage: null,
            plotBorderWidth: 0,
            plotShadow: false
        },

        title: {
            text: 'Sales-O-Meter'
        },

        pane: {
            startAngle: -150,
            endAngle: 150,
            background: [{
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#FFF'],
                        [1, '#333']
                    ]
                },
                borderWidth: 0,
                outerRadius: '109%'
            }, {
                backgroundColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, '#333'],
                        [1, '#FFF']
                    ]
                },
                borderWidth: 1,
                outerRadius: '107%'
            }, {
                // default background
            }, {
                backgroundColor: '#DDD',
                borderWidth: 0,
                outerRadius: '105%',
                innerRadius: '103%'
            }]
        },

        // the value axis
        yAxis: {
            min: 0,
            max: 100,

            minorTickInterval: 'auto',
            minorTickWidth: 1,
            minorTickLength: 2.5,
            minorTickPosition: 'inside',
            minorTickColor: '#666',

            tickPixelInterval: 15,
            tickWidth: 1,
            tickPosition: 'inside',
            tickLength: 5,
            tickColor: '#666',
            labels: {
                step: 5,
                rotation: 'auto'
            },
            title: {
                text: 'sales/sec'
            },
            plotBands: [{
                from: 0,
                to: 10,
                color: '#DF5353' // green
            }, {
                from: 10,
                to: 20,
                color: '#DDDF0D' // yellow
            }, {
                from:20,
                to: 100,
                color: '#55BF3B' // red
            }]        
        },

        series: [{
            name: 'Speed',
            data: [80],
            tooltip: {
                valueSuffix: ' sales/sec'
            }
        }]

    }, 
    // Add some life
    function (chart) {
        setInterval(function () {
                   myFunction();
                   if(flag == 1){
               var point = chart.series[0].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);
                }
                else{

                   var point = chart.series[0].points[0],
                      newVal=0,
                      inc = 0;
                   point.update(0);
                }
            flag = 0;  //reset flag after point update.  
        }, 1000);
    });
});
</script>

</head>
<body>

<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>

<script src="highcharts.js"></script>
<script src="highcharts-more.js"></script>
<!--<script src="exporting.js"></script>-->

    </body>
</html>
于 2013-03-17T22:53:19.727 回答