0

私は自分のページで Google 折れ線グラフを使用しています。5秒ごとに更新されます。しかし奇妙なことに、グラフのサイズは同じままですが、リフレッシュするたびにグラフ内の線が縮小します。

私のスクリプト -

google.load('visualization', '1', {packages:['corechart']});
    google.setOnLoadCallback(drawLine); // call drawChart when google.load() completes
    function drawLine() {
        var gaugeData = new google.visualization.DataTable();
        gaugeData.addColumn('string', 'Time');    // X-Axis
        gaugeData.addColumn('number', 'Memory');    // Y-Axis
        gaugeData.addColumn('number', 'CPU');    // Y-Axis
        var gaugeOptions = {title: 'System Details'};    // Tile of chart
        var gauge;
        var tempArray;    // Store json object value from server
        var tempArray2;    // Modify json object value from server
        gauge = new google.visualization.LineChart(document.getElementById('line_chart_div'));
        setInterval(function(){$.ajax({
              url: "lineChart.jsp",    // Page from which json(new chart values) are fetched
              cache: false,
              data: {search: "test"},
              dataType: "json",
              success: function(json2) {
                  tempArray = (json2.Stats).toString().split(",");    // json2.Stats="1:45|34|56,1:55|67|43,......."
                  var colCount=0;
                  var i=0;    //rowCount
                  gaugeData.addRows(tempArray.length);   // length of array = no. of rows to be inserted(this is always constant)
                  for (i=0; i < tempArray.length; i++){
                      tempArray2 = tempArray[i].split("|");    // tempArray2={"1:45","34","56"}..
                      gaugeData.setValue(i,colCount++,tempArray2[0]);    // column1
                      gaugeData.setValue(i,colCount++,parseInt(tempArray2[1], 10));    // column2
                      gaugeData.setValue(i,colCount++,parseInt(tempArray2[2], 10));    // column3
                      colCount=0;
                  }
                  gauge.draw(gaugeData, gaugeOptions);
              }
          });}, 5000);
    }

どうすればこれを止めることができますか!? :|

4

1 に答える 1

1

解決策を見つけました。古い行を削除せずに、DataTable に継続的に行を追加していました。

今、チャートの新しい値を更新する前にこれを行います-

gaugeData.removeRows(0,tempArray.length);    //tempArray.length=no. of old rows
于 2013-03-21T12:21:52.560 に答える