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

Question

地点公司 GR1 GR2 GR3 GR4 GR5

1 位纽约客户 0 0 13 5 19

2 CALI 组织 270 210 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 新泽西组织 0 0 54 22 28

7 个 TXS 客户 0 0 0 10 11

过滤位置： [纽约市、加利福尼亚州、西部数据中心、新泽西州、德克萨斯州、犹他州、乔治亚州]

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

IN ColumnChart-STACKED 对于 CALI 和 WDC，它显示两列。在那里我想显示为 CUSTOMERS 和 ORG 的累积值的单个列。但是 table 显示两个 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 有两列的原因，
是因为数据中有两行table。

为了只有一列，您需要在位置上聚合数据 table。

这可以通过从仪表板中删除图表来执行，
然后在 table 图表的 'ready' 事件触发时单独绘制它。
为此，您需要从柱形图中删除 view。

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

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

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(); i++) {
      if (i !== dt.getNumberOfColumns() - 2) {
        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>

编辑

在注释列中，我们需要手动计算总数...

viewColumns.push({
  calc: function (dt, row) {
    var total = 0;
    for (var c = 1; c < dt.getNumberOfColumns(); c++) {
      total += dt.getValue(row, c);
    }
    return total.toFixed(0);
  },
  role: 'annotation',
  type: 'string'
});

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

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(); i++) {
      if (i !== dt.getNumberOfColumns() - 2) {
        if (dt.getColumnType(i) === 'number') {
          if (dt.getColumnRole(i) !== 'annotation') {
            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)
      });
    }

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

    viewColumns.push({
      calc: function (dt, row) {
        var total = 0;
        for (var c = 1; c < dt.getNumberOfColumns(); c++) {
          total += dt.getValue(row, c);
        }
        return total.toFixed(0);
      },
      role: 'annotation',
      type: 'string'
    });

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

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

Google Chart - stacked chart one data two filters

javascript

charts

google-visualization