Javascript 谷歌图表-堆叠图表一个数据两个过滤器

地点公司GR1 GR2 GR3 GR4 GR5

1纽约客户0 13 5 19

2卡利组织270 210 0 32 51

3卡利客户35.942 39 0 50 126

4个WDC客户0 35 52 88

5 WDC客户44.507 0 25 18 88

6新泽西州组织0 54 22 28

7 TXS客户0 10 11

过滤器位置： [纽约州、加利福尼亚州、华盛顿州、新泽西州、德克萨斯州、犹他州、佐治亚州]

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

在为CALI和WDC堆叠的柱形图中，它显示了两列。在这里，我想将客户和组织的累积价值显示为一列。但对于表，可以显示两个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>

google.charts.load（'current'{
包：['corechart'，'table'，'gauge'，'controls']
}).然后（函数（）{
drawMainDashboard（）；
});
函数drawMainDashboard（）{
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_division1'）；
var categoryPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱运输”：“分类集装箱运输部”，
“选项”：{
“filterColumnIndex”：1，
“用户界面”：{
“标签固定”：“垂直”，
“标签”：“公司选择：”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
var categoryPicker1=新的google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱运输”：“categoryPicker_div1”，
“选项”：{
“filterColumnIndex”：0，
“用户界面”：{
“标签固定”：“垂直”，
“标签”：“位置选择：”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
var columnchrt=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱船”：“海图分区”，
“选项”：{
标题：“今日位置图”，
宽度：850，
身高：500，
图例：{位置：'top'，最大线：2}，
条形图：{groupWidth:'70%}，
isStacked：是的，
资源管理器：{keepInBounds:true，maxZoomIn:10.0}
},
'视图'：{'列'：[0,2,3,4,5,7]}
});
var table=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“表格分区”，
“选项”：{
showRowNumber:true，
宽度：“100%”，
高度：“100%”，
allowHtml：是的
},
'视图'：{'列'：[0,1,2,3,4,5,6]}
});
var data=google.visualization.arrayToDataTable([
['Location'，'Company'，'Beverage'，'Food'，'Industrial'，'Un-Filled'，'Total'，{role:'annotation'}]，
['${entry.key}'、'${entry.value7}'、${entry.value1}、${entry.value2}、${entry.value3}、${entry.value4}、${entry.value5}、${entry.value6}]，
]); 
dashboard.bind（[categoryPicker，categoryPicker1]，[columnchrt，table]）；
仪表盘.绘图（数据）；
}
截至今日按地点划分
CALI和WDC有两列的原因，

是因为数据表中有两行

为了拥有一列，您需要在位置上聚合数据表

这可以通过从仪表板中删除图表来执行，

然后，当表格图表的
'ready'
事件触发时，分别绘制它。

为此，您需要从柱状图中删除
视图

当ready事件触发时，聚合数据表。

您还需要在聚合数据表上构建数据视图，

以添加回总注释

请参阅以下工作片段


google.charts.load（'current'{
包：['corechart'，'table'，'gauge'，'controls']
}).然后（函数（）{
drawMainDashboard（）；
});
函数drawMainDashboard（）{
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_division1'）；
var categoryPicker=new google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱运输”：“分类集装箱运输部”，
“选项”：{
“filterColumnIndex”：1，
“用户界面”：{
“标签固定”：“垂直”，
“标签”：“公司选择：”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
var categoryPicker1=新的google.visualization.ControlWrapper({
“controlType”：“CategoryFilter”，
“集装箱运输”：“categoryPicker_div1”，
“选项”：{
“filterColumnIndex”：0，
“用户界面”：{
“标签固定”：“垂直”，
“标签”：“位置选择：”，
“allowTyping”：false，
“allowMultiple”：false
}
}
});
var columnchrt=new google.visualization.ChartWrapper({
“chartType”：“ColumnChart”，
“集装箱船”：“海图分区”，
“选项”：{
标题：“今日位置图”，
宽度：850，
身高：500，
图例：{位置：'top'，最大线：2}，
条形图：{groupWidth:'70%}，
isStacked：是的，
资源管理器：{keepInBounds:true，maxZoomIn:10.0}
}
});
var table=new google.visualization.ChartWrapper({
“图表类型”：“表格”，
“集装箱运输”：“表格分区”，
“选项”：{
showRowNumber:true，
宽度：“100%”，
高度：“100%”，
allowHtml：是的
},
'视图'：{'列'：[0,1,2,3,4,5,6]}
});
google.visualization.events.addListener（表'ready'，函数（）{
//从表格图表中获取筛选的数据表格
var dt=table.getDataTable（）；
//生成聚合和视图列
var aggColumns=[]；
var viewColumns=[0]；
对于（var i=2；i