javascript - 在 Google 散点图中创建新行/标记后，之前的行/标记就会消失-6ren

javascript - 在 Google 散点图中创建新行/标记后，之前的行/标记就会消失

转载作者：行者123 更新时间：2023-11-30 00:20:05

我正在创建一个谷歌散点图。我想动态更新标记/行。问题是，当它们被动态更新时，每次创建新行时，前一行都会消失。我想看到新行和旧行。这些行正在从组合框项目选择中动态更新。 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>

最佳答案

您总是创建一个新的数据表，为了保留以前的值，您必须在第一次调用 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>

关于javascript - 在 Google 散点图中创建新行/标记后，之前的行/标记就会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33445025/

文章推荐： android - 如何在android中为动画计时

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在 Google 散点图中创建新行/标记后，之前的行/标记就会消失