Question

我为每个圆环图创建了一个包含不同数据的Google图表信息中心，但只有data_2返回，而不是第一个图表<div>的data_1和第二个图表<div>的data_2。 {/ 3}}对于具有不同数据的多图表需要单独的功能，但有没有办法在第一个函数drawStuff_1中使用两个数据集？
我最终想要一个仪表板，一个ControlWrapper（一对多），多个数据集（carlos，josh等）和多个圆环图（卡洛斯<div>，乔什等<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

只能有一个数据集

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

view

上也可以使用ControlWrapper属性

请参阅以下工作代码段，其中包括一个控制台，一个控件，
两个图表（每个Carlos和Josh一个）

＆＃13;

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);
}

＆＃13;

.ggl-dashboard {
  border: 1px solid #ccc;
}

.ggl-control (
  min-width: 250px;
  padding-left: 2em;
)

.ggl-chart (
  display: inline-block;
)

＆＃13;

<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>

＆＃13;

Google Chart仪表板有多个数据

1 个答案: