Google Charts：循环控制（设置不同的状态）并为每个州打印PNG

Question

我有一个带控件的Google图表。该控件是一个类别过滤器（最多一个类别），它允许我选择我想要查看其数据的公司。我想创建一个循环遍历每个公司的函数，并为每个公司获取PNG。

我的功能只用循环打印最后一家公司的PNG。我已经研究过回调和闭包，但仍然在努力完全掌握这个概念。

代码段：

//chart is a ChartWrapper
//companyIdFilter is a ControlWrapper

$(function() { 
  $("#loopSave").click(function() {        
      var arrCompanyID = [1,2,3];

      for (var i=0; i<arrCompanyID.length; i++) {
        var currentID = arrCompanyID[i];        
        (function(id){          
              google.visualization.events.addOneTimeListener(chart.getChart(), 'ready', function(){                       
                var initState = { selectedValues: [id] };
                companyIdFilter.setState(initState);        

                var chartImg = chart.getChart().getImageURI();
                sendChartToDrive_Src(chartImg, id);
             });              

            companyIdFilter.draw();
        })(currentID);

      }
  })
});

修改

我要完成的是一个循环，它遍历每个公司ID并保存+上传图像到Google云端硬盘。我的数据表的结构与Google表格中的源数据相匹配。现在发生的事情是，我的功能只会保存 last 图表（在本例中为2）。我正在关注此blog post，似乎存在类似的问题。

部分jsfiddle：https://jsfiddle.net/nelsonology/b90cvsnf/12/

Answer 1

而不是依赖过滤器的状态来改变图表，
建议在图表上设置一个视图，只绘制特定公司的行

您可以使用数据表方法 - ＆gt; getFilteredRows
这将返回给定列值的行索引数组

  chart.setView({
    // exclude company id column from chart (column 0)
    columns: [1, 2],

    // include rows for company id
    rows: data.getFilteredRows([{
      column: 0,
      value: id
    }])
  });

不确定您的代码是如何设置的，使用仪表板等。
但以下是工作片段来说明概念
为了示例的目的，每个图像被添加到页面中 点击＆＃34;保存图片＆＃34;看到它在行动......

＆＃13;

＆＃13;

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'id');
  data.addColumn('number', 'x');
  data.addColumn('number', 'y');
  data.addRows([
    [1, 1, 1],
    [1, 2, 2],
    [1, 3, 3],
    [2, 21, 1],
    [2, 22, 2],
    [2, 23, 3],
    [3, 41, 1],
    [3, 42, 2],
    [3, 43, 3]
  ]);

  var companyIdFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'id',
      ui: {
        allowTyping: false,
        allowMultiple: false
      }
    }
  });

  var chart = new google.visualization.ChartWrapper({
    chartType: 'LineChart',
    containerId: 'chart_div',
    view: {
      columns: [1, 2]
    }
  });

  var dashboardContainer = document.getElementById('dashboard_div');
  var dashboard = new google.visualization.Dashboard(dashboardContainer);
  dashboard.bind(companyIdFilter, chart);
  dashboard.draw(data);

  var colors = ['cyan', 'magenta', 'lime'];  // for example only

  $('.save-button').on('click', function () {
    var arrCompanyID = data.getDistinctValues(0);

    $.each(arrCompanyID, function (i, id) {
      chart.setView({
        // exclude company id column from chart (column 0)
        columns: [1, 2],

        // include rows for company id
        rows: data.getFilteredRows([{
          column: 0,
          value: id
        }])
      });

      // for example only
      chart.setOption('backgroundColor', colors[i]);
      chart.setOption('colors', ['yellow']);

      google.visualization.events.addOneTimeListener(chart.getChart(), 'ready', function(){
        var chartImg = chart.getChart().getImageURI();

        // for example only
        $('#image_div').append('<img src="' + chartImg + '" />');

        //sendChartToDrive_Src(chartImg, id);
      });

      chart.draw();
    });
  });
});

＆＃13;

.control {
  display: inline-block;
}

＆＃13;

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div>
    <button class="save-button ui-button ui-widget ui-corner-all">
      <span class="ui-icon ui-icon-disk"></span><span>&nbsp;Save Image</span>
    </button>
    <div class="control" id="control_div"></div>
  </div>
  <div id="chart_div"></div>
</div>
<div id="image_div"></div>

＆＃13;

＆＃13;

＆＃13;