Google 图表仪表板多个数据

Question

我创建了一个 google 图表仪表板，每个圆环图都有不同的数据，但只有 data_2 returns，而不是第一个图表 data_1 <div> 和 data_2 第二个图表 <div>。 Source document 对于具有不同数据的多图表需要单独的函数，但是有没有办法在第一个函数中使用两个数据集 drawStuff_1？
我最终想要一个仪表板、一个 ControlWrapper（一对多）、多个数据集（carlos、josh 等）和多个圆环图（carlos 的 <div>，josh 的 <div>，其他任何人).

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawStuff_1);
      google.charts.setOnLoadCallback(drawStuff_2);

      function drawStuff_1() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));
          
        programmaticFilter_1 = new google.visualization.ControlWrapper({
          'controlType': 'CategoryFilter',
          'containerId': 'programmatic_control_div_1',
          'options': {
            'filterColumnLabel': 'Status',
            'ui': {'labelStacking': 'vertical'}
          }
        });
    // First dataset
       var data_1 = new google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Dual Approved' , 5],
        ['Approved', 7],
        ['Review', 3],
        ['Draft', 2],
        ['Not In', 6],
        ['Edit Rerun', 1],
        ]);
       programmaticChart_1  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div_1',
        'options': {
          'width': 290,
          'height': 220,
          'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value', //percentage' 'value' 'label''none'
          'pieHole': 0.4,
          'legend': {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
          'pieSliceBorderColor': 'Black',
          'title': 'Josh',
          
        }
      });

      dashboard.bind(programmaticFilter_1, programmaticChart_1);
      dashboard.draw(data_1);

    }
    
   function drawStuff_2() {

        var dashboard = new google.visualization.Dashboard(
          document.getElementById('programmatic_dashboard_div'));
          
// second dataset      
           var data_2 = new google.visualization.arrayToDataTable([
        ['Status', 'Count'],
        ['Dual Approved' , 1],
        ['Approved', 10],
        ['Review', 2],
        ['Draft', 9],
        ['Not In', 10],
        ['Edit Rerun', 4],
        ]);
        
       programmaticChart_2  = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'programmatic_chart_div_2',
        'options': {
          'width': 250,
          'height': 220,
          'legend': 'none',
          'chartArea': {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
          'pieSliceText': 'value', //percentage' 'value' 'label''none'
          'pieHole': 0.4,
          'pieSliceBorderColor': 'Black',
          'title': 'Carlos',
        }
      });

      dashboard.bind(programmaticFilter_1, programmaticChart_2);
      dashboard.draw(data_2);
}
    </script>
 
  <body>
    <div id="programmatic_dashboard_div" style="border: 1px solid #ccc">
                <td>
            <div id="programmatic_control_div_1" style="padding-left: 2em; min-width: 250px"></div>
          </td>
      <table class="columns">
        <tr>
          <td>
            <div id="programmatic_chart_div_1"></div>
          </td>
          <td>
            <div id="programmatic_chart_div_2"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>

Answer 1

首先，setOnLoadCallback每页只能使用一次

但这是一个简单的解决方法，您可以将 callback 直接包含在 load 语句中

google.charts.load('current', {
  callback: drawStuff,
  packages:['corechart', 'controls']
});

接下来，每个Dashboard

只能有一个数据集

但是，您可以在 ChartWrapper
上使用 view 属性控制哪些列或行应用于图表

view 属性也可以在 ControlWrapper

请参阅以下工作代码段，其中包括一个仪表板、一个控件，
和两张图表 （Carlos 和 Josh 各一张）

google.charts.load('current', {
  callback: drawStuff,
  packages:['corechart', 'controls']
});

function drawStuff() {
  var dashboard = new google.visualization.Dashboard(
    document.getElementById('dashboard_div')
  );

  // Combined dataset
  var data = new google.visualization.arrayToDataTable([
    ['Status', 'Carlos', 'Josh'],
    ['Dual Approved', 5, 1],
    ['Approved', 7, 10],
    ['Review', 3, 2],
    ['Draft', 2, 9],
    ['Not In', 6, 10],
    ['Edit Rerun', 1, 3]
  ]);

  var programmaticFilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'control_div',
    options: {
      filterColumnLabel: 'Status',
      ui: {
        labelStacking: 'vertical'
      }
    }
  });

  var programmaticChart_Carlos = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div_Carlos',
    options: {
      width: 290,
      height: 220,
      chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
      pieSliceText: 'value',
      pieHole: 0.4,
      legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
      pieSliceBorderColor: 'Black'
    },
    view: {
      columns: [0, 1]
    }
  });
  programmaticChart_Carlos.setOption('title', 'Carlos');

  var programmaticChart_Josh = new google.visualization.ChartWrapper({
    chartType: 'PieChart',
    containerId: 'chart_div_Josh',
    options: {
      width: 290,
      height: 220,
      chartArea: {'left': 20, 'top': 20, 'right': 0, 'bottom': 0},
      pieSliceText: 'value',
      pieHole: 0.4,
      legend: {position: 'left', textStyle: {color: 'black', fontSize: 9, fontName: 'Garamond' }},
      pieSliceBorderColor: 'Black'
    },
    view: {
      columns: [0, 2]
    }
  });
  programmaticChart_Josh.setOption('title', 'Josh');

  dashboard.bind(
    programmaticFilter,
    [programmaticChart_Carlos, programmaticChart_Josh]
  );
  dashboard.draw(data);
}

.ggl-dashboard {
  border: 1px solid #ccc;
}

.ggl-control (
  min-width: 250px;
  padding-left: 2em;
)

.ggl-chart (
  display: inline-block;
)

<script src="https://www.gstatic.com/charts/loader.js"></script>

<div class="ggl-dashboard" id="dashboard_div">
  <div class="ggl-control" id="control_div"></div>
  <div class="ggl-chart" id="chart_div_Carlos"></div>
  <div class="ggl-chart" id="chart_div_Josh"></div>
</div>

Google 图表仪表板多个数据

Google Chart dashboard multiple data

javascript

visualization

dashboard

google-visualization