在 Google 散点图中创建新的 rows/markers 后，先前的 Rows/Markers 就会消失

Question

我正在创建一个 google 散点图。我想动态更新 markers/rows。问题是，当它们被动态更新时，每次创建新行时，前一行都会消失。我想看到新行和旧行。这些行正在从组合框项目选择中动态更新。 However, the previous row disappears when the new combobox item is selected.我想查看图表上的所有行。我的代码是::

<script type="text/javascript">
    var i=0;
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);          
    function drawChart() 
       {
        var data = new google.visualization.DataTable();
        var strUser=[0];
        var strUser2=[0];
        if(i==0)
        {
         var strUser=[0];
         var strUser2=[0];         
        }
        else
        {            
         var a= document.getElementById("combo1");
        strUser[i] = parseInt(a.options[a.selectedIndex].value);                   
        var b= document.getElementById("combo2");
        strUser2[i] = parseInt(b.options[b.selectedIndex].value);
         }
        var options = 
        {
          title: 'x vs. y ',
          legend: { position: 'top', maxLines: 150 },
          hAxis: {title: 'x', minValue: 0, maxValue: 15},
          vAxis: {title: 'y', minValue: 0, maxValue: 15},
        };
         data.addColumn('number', 'x');
         data.addColumn('number', 'y');
         var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));;

        for(j=0;j<=i;j++)
        {
        data.addRows(i+1);
        data.addRows([[strUser[j],strUser2[j]]]);   
        }
        i=i+1;
        chart.draw(data, options);                     
      }
for html:
<body>
<select name="combo1" id="combo1" onchange="drawChart()">
  <option value="0">X</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>  
</select>
<select name="combo2" id="combo2" onchange="drawChart()">
  <option value="0">Y</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>  
</select>
</body>

Answer 1

你总是创建一个新的数据表，为了保留以前的值，你必须在第一次调用时将数据表存储在某个地方 drawChart 并在后续调用中使用存储的数据表。

示例（将数据表存储为您绘制图表的节点的属性）

    var i=0;
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);          
    function drawChart() 
       {
        var container=document.getElementById('chart_div');
        if(!container.datatable){
          container.datatable = new google.visualization.DataTable();
          container.datatable.addColumn('number', 'x');
          container.datatable.addColumn('number', 'y');
        }
        data=container.datatable
        
        var strUser=[0];
        var strUser2=[0];
        if(i==0)
        {
         var strUser=[0];
         var strUser2=[0];         
        }
        else
        {            
         var a= document.getElementById("combo1");
        strUser[i] = parseInt(a.options[a.selectedIndex].value);                   
        var b= document.getElementById("combo2");
        strUser2[i] = parseInt(b.options[b.selectedIndex].value);
         }
        var options = 
        {
          title: 'x vs. y ',
          legend: { position: 'top', maxLines: 150 },
          hAxis: {title: 'x', minValue: 0, maxValue: 15},
          vAxis: {title: 'y', minValue: 0, maxValue: 15},
        };
         
         var chart = new google.visualization.ScatterChart(container);

        for(j=0;j<=i;j++)
        {
        data.addRows([[strUser[j],strUser2[j]]]);   
        }
        i=i+1;
        chart.draw(data, options);                     
      }

   <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<select name="combo1" id="combo1" onchange="drawChart()">
  <option value="0">X</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>  
</select>
<select name="combo2" id="combo2" onchange="drawChart()">
  <option value="0">Y</option>
  <option value="0">0</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
  <option value="6">6</option>
  <option value="7">7</option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>  
</select>
<div id="chart_div" ></div>

在 Google 散点图中创建新的 rows/markers 后，先前的 Rows/Markers 就会消失

Previous Rows/Markers disappear once new rows/markers are created in Google Scatter Chart

javascript

php

google-visualization