Question

我在我的网页上使用谷歌折线图。每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);
    }

如何阻止这种情况！：|

Answer 1

找到解决方案。我不断向DataTable添加行而不删除旧行。

现在我在更新图表中的新值之前执行此操作 -

gaugeData.removeRows(0,tempArray.length);    //tempArray.length=no. of old rows

谷歌折线图x轴在过渡时收缩

1 个答案: