Google图表-堆叠图表一个数据两个过滤器

Question

位置公司GR1 GR2 GR3 GR4 GR5

1名纽约客户0 0 13 5 19

2 CALI ORG 270210 0 32 51

3个CALI客户35.942 39 0 50 126

4个WDC客户0 0 35 52 88

5个WDC客户44.507 0 25 18 88

6 NJ ORG 0 0 54 22 28

7个TXS客户0 0 0 10 11

过滤器位置：[NYC，CALI，WDC，NJ，TXS，UT，GA]

过滤器公司：[客户，组织]

在CALI和WDC中的ColumnChart-STACKED中，它显示两列。我想将CUSTOMERS和ORG的累计值显示为单列。但对于表，可以显示两个CALI和WDC。

我的代码

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

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
    drawMainDashboard();
});

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

var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div',
'options': {
  'filterColumnIndex': 1,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Company Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var categoryPicker1 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'categoryPicker_div1',
'options': {
  'filterColumnIndex': 0,
  'ui': {
    'labelStacking': 'vertical',
    'label': 'Location Selection:',
    'allowTyping': false,
    'allowMultiple': false
  }
}
});

var columnchrt = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'chart_div',
'options': {
     title: "Locations  charts today",
     width: 850,
     height: 500,
     legend: { position: 'top', maxLines: 2 },
     bar: { groupWidth: '70%' },
     isStacked: true,
     explorer: {keepInBounds: true, maxZoomIn: 10.0}
},
'view': {'columns': [0,2,3,4,5,7]}
});

var table = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
    showRowNumber: true,
    width: '100%',
    height: '100%',
    allowHtml: true
},
'view': {'columns': [0,1,2,3,4,5,6]}
});

var data = google.visualization.arrayToDataTable([
 ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
 <c:forEach items="${GrsByCompanyList}" var="entry">
    [ '${entry.key}', '${entry.value7}', ${entry.value1}, ${entry.value2}, ${entry.value3}, ${entry.value4}, ${entry.value5}, ${entry.value6} ],
  </c:forEach>
]); 

dashboard.bind([categoryPicker,categoryPicker1], [columnchrt, table]);
dashboard.draw(data);
}

<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>

Answer 1

原因是CALI和WDC有两列，是因为数据表中有两行。

为了只有一列，您需要在位置上汇总数据表。

这可以通过从仪表板上删除图表来完成，然后在表格图表的'ready'事件触发时分别绘制它。为此，您需要从柱形图中删除view。

当ready事件触发时，汇总数据表。您还需要在汇总数据表上构建数据视图，为了添加回总注释。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart', 'table', 'gauge', 'controls']
}).then(function () {
  drawMainDashboard();
});

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

  var categoryPicker = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div',
  'options': {
    'filterColumnIndex': 1,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Company Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var categoryPicker1 = new google.visualization.ControlWrapper({
  'controlType': 'CategoryFilter',
  'containerId': 'categoryPicker_div1',
  'options': {
    'filterColumnIndex': 0,
    'ui': {
      'labelStacking': 'vertical',
      'label': 'Location Selection:',
      'allowTyping': false,
      'allowMultiple': false
    }
  }
  });

  var columnchrt = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'chart_div',
  'options': {
       title: "Locations  charts today",
       width: 850,
       height: 500,
       legend: { position: 'top', maxLines: 2 },
       bar: { groupWidth: '70%' },
       isStacked: true,
       explorer: {keepInBounds: true, maxZoomIn: 10.0}
  }
  });

  var table = new google.visualization.ChartWrapper({
  'chartType': 'Table',
  'containerId': 'table_div',
  'options': {
      showRowNumber: true,
      width: '100%',
      height: '100%',
      allowHtml: true
  },
  'view': {'columns': [0,1,2,3,4,5,6]}
  });

  google.visualization.events.addListener(table, 'ready', function () {
    // get filtered data table from table chart
    var dt = table.getDataTable();

    // build aggregation and view columns
    var aggColumns = [];
    var viewColumns = [0];
    for (var i = 2; i < dt.getNumberOfColumns() - 2; i++) {
      if (dt.getColumnType(i) === 'number') {
        if (dt.getColumnRole(i) === 'annotation') {
          addAnnColumn(i);
        } else {
          addAggColumn(i);
          viewColumns.push(i - 1);
        }
      }
    }
    function addAggColumn(index) {
      aggColumns.push({
        aggregation: google.visualization.data.sum,
        column: index,
        label: dt.getColumnLabel(index),
        type: dt.getColumnType(index)
      });
    }
    function addAnnColumn(index) {
      viewColumns.push({
        calc: 'stringify',
        role: 'annotation',
        sourceColumn: aggColumns.length,
        type: 'string'
      });
    }

    // aggregate data table
    var agg = google.visualization.data.group(
      dt,
      [0],
      aggColumns
    );

    // create agg data view to add annotation
    var view = new google.visualization.DataView(agg);
    view.setColumns(viewColumns);

    // draw chart
    columnchrt.setDataTable(view);
    columnchrt.draw();
  });


  var data = google.visualization.arrayToDataTable([
    ['Location', 'Company', 'Beverage', 'Food', 'Industrial', 'Un-Filled', 'Total', { role: 'annotation' } ],
    ['NYC', 'CUSTOMERS', 0, 0, 13, 5, 19, 19],
    ['CALI', 'ORG', 270, 210, 0, 32, 51, 51],
    ['CALI', 'CUSTOMERS', 35.942, 39, 0, 50, 126, 126],
    ['WDC', 'CUSTOMERS', 0, 0, 35, 52, 88, 88],
    ['WDC', 'CUSTOMERS', 44.507, 0, 25, 18, 88, 88],
    ['NJ', 'ORG', 0, 0, 54, 22, 28, 28],
    ['TXS', 'CUSTOMERS', 0, 0, 0, 10, 11, 11]
  ]);

  dashboard.bind([categoryPicker,categoryPicker1], [table]);
  dashboard.draw(data);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_division" style="clear:left; display:inline-block; width:100%; float:left; margin-top:5px;">

<div class="float_left panel" style="float:left; width:60%; padding:0px;">
    <div id="chart_div"></div>
</div>
<div class="float_left panel" style="width:38%; padding:0px;">
    <div class="table_bbar" style="background-color:#27ae60;" >
        <h4>by Locations as on Today</h4>
        <div id="categoryPicker_div" style="right:15px; position:absolute;"></div>
        <div id="categoryPicker_div1" ></div>
    </div>

    <div id="table_div"></div>

</div>
</div>