http://jsfiddle.net/dcw2qq/828pkn6w/
当我点击主饼图单个切片（pieChart）时，我试图获取选择值。现在它正在触发选择的侦听器，但它不区分不同的类别。我已经习惯了这个API大约一周的新手JS经验，所以这可能是一个简单的解决方案。有问题的功能从第285行开始。
请查看我的JS小提琴代码。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the controls package.
google.load('visualization', '1.0', {'packages':['controls']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('string', 'Description');
data.addColumn('string', 'Category');
data.addColumn('number', 'Amount');
data.addRows([
[new Date(2010, 6, 13),'CRATE AND BARREL #344', 'Merchandise',{v: 232.00, f: '$232.00'}],
[new Date(2010, 4, 4),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
[new Date(2010, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 56.23, f: '$56.23'}],
[new Date(2010, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 24.50, f: '$24.50'}],
[new Date(2010, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
[new Date(2010, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 645.67, f: '$645.67'}],
[new Date(2010, 5, 23),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
[new Date(2010, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 45.03, f: '$45.03'}],
[new Date(2010, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 56.00, f: '$56.00'}],
[new Date(2010, 6, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
[new Date(2010, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 876.23, f: '$876.23'}],
[new Date(2010, 7, 25),'MUAY THAI', 'Dinning', {v: 19.34, f: '$19.34'}],
[new Date(2010, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
[new Date(2010, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 309.76, f: '$309.76'}],
[new Date(2010, 3, 4),'CVS PHARMACY', 'Merchandise', {v: 3.21, f: '$3.21'}],
[new Date(2010, 10, 13),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
[new Date(2010, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 923.55, f: '$923.55'}],
[new Date(2010, 7, 24),'CAFE MENCINA', 'Merchandise',{v: 98.56, f: '$98.56'}],
[new Date(2010, 3, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
[new Date(2010, 9, 16),'RITZ CARLTON', 'Lodging',{v: 456.12, f: '$456.12'}],
[new Date(2011, 6, 16),'CRATE AND BARREL #644', 'Merchandise',{v: 292.00, f: '$292.00'}],
[new Date(2011, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
[new Date(2011, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 56.26, f: '$56.26'}],
[new Date(2011, 9, 6),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
[new Date(2011, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
[new Date(2011, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 685.67, f: '$685.67'}],
[new Date(2011, 5, 26),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
[new Date(2011, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.06, f: '$85.06'}],
[new Date(2011, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 56.00, f: '$56.00'}],
[new Date(2011, 6, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
[new Date(2011, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 876.26, f: '$876.26'}],
[new Date(2011, 7, 25),'MUAY THAI', 'Dinning', {v: 19.68, f: '$19.68'}],
[new Date(2011, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
[new Date(2011, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 609.76, f: '$609.76'}],
[new Date(2011, 6, 8),'CVS PHARMACY', 'Merchandise', {v: 6.21, f: '$6.21'}],
[new Date(2011, 10, 16),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
[new Date(2011, 6, 22),'DELTA AIRLINES', 'Airfare',{v: 926.55, f: '$926.55'}],
[new Date(2011, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 98.56, f: '$98.56'}],
[new Date(2011, 6, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
[new Date(2011, 9, 16),'RITZ CARLTON', 'Lodging',{v: 856.12, f: '$856.12'}],
[new Date(2012, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 292.00, f: '$292.00'}],
[new Date(2012, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.99, f: '$252.99'}],
[new Date(2012, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
[new Date(2012, 9, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
[new Date(2012, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
[new Date(2012, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 285.27, f: '$285.27'}],
[new Date(2012, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
[new Date(2012, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.02, f: '$85.02'}],
[new Date(2012, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
[new Date(2012, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 109.78, f: '$109.78'}],
[new Date(2012, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 872.22, f: '$872.22'}],
[new Date(2012, 7, 25),'MUAY THAI', 'Dinning', {v: 19.28, f: '$19.28'}],
[new Date(2012, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
[new Date(2012, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 209.72, f: '$209.72'}],
[new Date(2012, 2, 8),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
[new Date(2012, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
[new Date(2012, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 922.55, f: '$922.55'}],
[new Date(2012, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 98.52, f: '$98.52'}],
[new Date(2012, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
[new Date(2012, 9, 12),'RITZ CARLTON', 'Lodging',{v: 852.12, f: '$852.12'}],
[new Date(2013, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 222.00, f: '$222.00'}],
[new Date(2013, 8, 8),'HILTON HOTELS', 'Lodging', {v: 252.22, f: '$252.22'}],
[new Date(2013, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
[new Date(2013, 2, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 28.50, f: '$28.50'}],
[new Date(2013, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 18.00, f: '$18.00'}],
[new Date(2013, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 285.27, f: '$285.27'}],
[new Date(2013, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
[new Date(2013, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 85.02, f: '$85.02'}],
[new Date(2013, 0, 8),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
[new Date(2013, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 102.78, f: '$102.78'}],
[new Date(2013, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 872.22, f: '$872.22'}],
[new Date(2013, 7, 25),'MUAY THAI', 'Dinning', {v: 12.28, f: '$12.28'}],
[new Date(2013, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
[new Date(2013, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 202.72, f: '$202.72'}],
[new Date(2013, 2, 8),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
[new Date(2013, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.87, f: '$25.87'}],
[new Date(2013, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 222.55, f: '$222.55'}],
[new Date(2013, 7, 28),'CAFE MENCINA', 'Merchandise',{v: 28.52, f: '$28.52'}],
[new Date(2013, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
[new Date(2013, 2, 12),'RITZ CARLTON', 'Lodging',{v: 852.12, f: '$852.12'}],
[new Date(2014, 2, 12),'CRATE AND BARREL #244', 'Merchandise',{v: 222.00, f: '$222.00'}],
[new Date(2014, 8, 3),'HILTON HOTELS', 'Lodging', {v: 252.22, f: '$252.22'}],
[new Date(2014, 0, 22),'LIBERTY VETERINARY RICHMOND VA', 'Other',{v: 52.22, f: '$52.22'}],
[new Date(2014, 2, 2),'REGAL SHORT PUMP RICHMOND VA', 'Entertainment',{v: 23.50, f: '$23.50'}],
[new Date(2014, 0, 17),'RICHMOND TIMES DISPATCH', 'Other',{v: 13.00, f: '$13.00'}],
[new Date(2014, 7, 12),'MARRIOTT RICHMOND VA', 'Lodging',{v: 235.27, f: '$235.27'}],
[new Date(2014, 5, 22),'HERTZ RENT-A-CAR', 'Car Rental', {v: 105.12, f: '$105.12'}],
[new Date(2014, 10, 5),'TURKEY HILL RICHMOND VA', 'Dinning',{v: 35.02, f: '$35.02'}],
[new Date(2014, 0, 3),'WAWAGAS', 'Gas/Automotive',{v: 52.00, f: '$52.00'}],
[new Date(2014, 2, 10),'JIFFYLUBE', 'Gas/Automotive',{v: 102.73, f: '$102.73'}],
[new Date(2014, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 372.22, f: '$372.22'}],
[new Date(2014, 7, 25),'MUAY THAI', 'Dinning', {v: 12.23, f: '$12.23'}],
[new Date(2014, 2, 22),'JCPENNY', 'Merchandise',{v: 102.22, f: '$102.22'}],
[new Date(2014, 1, 25),'BASS PRO SHOP', 'Merchandise',{v: 202.72, f: '$202.72'}],
[new Date(2014, 2, 3),'CVS PHARMACY', 'Merchandise', {v: 2.21, f: '$2.21'}],
[new Date(2014, 10, 12),'WILD WINGS CAFE', 'Dinning',{v: 25.37, f: '$25.37'}],
[new Date(2014, 2, 22),'DELTA AIRLINES', 'Airfare',{v: 222.55, f: '$222.55'}],
[new Date(2014, 7, 23),'CAFE MENCINA', 'Merchandise',{v: 23.52, f: '$23.52'}],
[new Date(2014, 2, 27),'WAWA GAS', 'Gas/Automotive', {v: 57.00, f: '$57.00'}],
[new Date(2014, 2, 12),'RITZ CARLTON', 'Lodging',{v: 352.12, f: '$352.12'}]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,2,3,{
calc: mas,
type: 'string',
}])
function mas(view2,row) {
var a = view2.getValue(row,2);
return a;
}
var dateRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Date',
'ui': { 'format': { 'pattern': 'yyyy' } },
}
});
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control2',
'options': {
'filterColumnLabel': 'Category',
'filterColumnIndex':2,
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
//'state': {'selectedValues': ['Gas/Automotive', 'Lodging','Merchandise']}
});
var categoryPicker2 = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control3',
'options': {
'filterColumnLabel': 'Category',
'filterColumnIndex':1,
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
//'state': {'selectedValues': ['Gas/Automotive', 'Lodging','Merchandise']}
});
var pieChart = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div',
'options': {
'backgroundColor': 'transparent',
'pieSliceBorderColor': 'transparent',
'chartArea':{
'left':130,
'top':-100,
'width':1000,
'height':1000,
'backgroundColor':'transparent',
},
'width': 600,
'height': 600,
'is3D':true,
'pieSliceText':'none',
'legend':{
'position': 'right',
'alignment':'center',
'textStyle': {
'color': 'blue',
'fontSize': 14
}
}
}
});
var pieChart2 = new google.visualization.ChartWrapper({
'chartType': 'PieChart',
'containerId': 'chart_div2',
'options': {
'backgroundColor': 'transparent',
'pieSliceBorderColor': 'transparent',
'chartArea':{
'left':130,
'top':-100,
'width':300,
'height':300,
'backgroundColor':'transparent',
},
'width': 300,
'height': 300,
'is3D':true,
'pieSliceText':'none',
'legend':{
'position': 'none',
'alignment':'center',
'textStyle': {
'color': 'blue',
'fontSize': 14
}
}
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'table_div',
'options': {
}
});
function selectHandler() {
var dt = tableChart.getDataTable();
var catGroup = google.visualization.data.group(dt, [{
type:'string',
label:dt.getColumnLabel(2),
column: 2,
}],[{
type: 'number',
label: dt.getColumnLabel(3),
column: 3,
aggregation: google.visualization.data.sum
}
]);
alert('The user selected ' + catGroup.getValue(3,0));
//window.open(url,'_self');
//}
}
function updatePieCharts() {
var dt = tableChart.getDataTable();
// DRAWS THE PIE CHARTS
var catGroup = google.visualization.data.group(dt, [{
type:'string',
label:dt.getColumnLabel(2),
column: 2,
}],[{
type: 'number',
label: dt.getColumnLabel(3),
column: 3,
aggregation: google.visualization.data.sum
}
]);
pieChart.setDataTable(catGroup);
formatter.format(catGroup, 1);
pieChart.draw();
// DRAWS THE PIE CHARTS
var catGroup2 = google.visualization.data.group(dt, [{
type:'string',
label:dt.getColumnLabel(1),
column: 1,
}],[{
type: 'number',
label: dt.getColumnLabel(3),
column: 3,
aggregation: google.visualization.data.sum
}
]);
pieChart2.setDataTable(catGroup2);
formatter.format(catGroup2, 1);
pieChart2.draw();
}
google.visualization.events.addListener(pieChart, 'select', selectHandler);
google.visualization.events.addListener(tableChart, 'ready', updatePieCharts);
/*function changeRangeOf(e,days) {
//setActiveState();
var timeframe = e
$('.chart-nav button.btn').removeClass('active');
$('#changeRange'+timeframe).addClass('active');
//setPieChart Range();
var today = new Date();
today.setHours(0, 0, 0, 0);
const monthLength = (24*(days)) * 60 * 60 * 1000;
var ago = new Date(today.getTime() - monthLength);
//Redraw Pie Chart();
dateRangeSlider.setState({lowValue: ago, highValue: today});
dateRangeSlider.draw();
}
$("#changeRangeMo").click(function(){changeRangeOf('Mo',30)});
$("#changeRange3Mo").click(function(){changeRangeOf('3Mo',90)});
$("#changeRange6Mo").click(function(){changeRangeOf('6Mo',180)});
$("#changeRange12Mo").click(function(){changeRangeOf('12Mo',365)});
$("#changeRange24Mo").click(function(){changeRangeOf('24Mo',730)});
$("#changeRange36Mo").click(function(){changeRangeOf('36Mo',1095)});
$("#changeRange48Mo").click(function(){changeRangeOf('48Mo',1460)});
$("#changeRangeYTD").click(function(){changeRangeOf('YTD',9999)}) */
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind([dateRangeSlider,categoryPicker,categoryPicker2],tableChart);
var formatter = new google.visualization.NumberFormat(
{prefix: '$',fractionDigits: 2});
formatter.format(data,3); // Apply formatter to second column
var formatter_short = new google.visualization.DateFormat({pattern: " MM/dd/yyyy"});
formatter_short.format(data, 0);
dashboard.draw(view);
}
</script>
</head>
<body>
<button class="reset" >Reset</button>
<button id="changeRangeMo" class="btn" >1 month</button>
<button id="changeRange3Mo" class="btn" >3 months</button>
<button id="changeRange6Mo" class="btn" >6 months</button>
<button id="changeRange12Mo" class="btn" >12 months</button>
<button id="changeRange24Mo" class="btn" >24 months</button>
<button id="changeRange36Mo" class="btn" >36 months</button>
<button id="changeRange48Mo" class="btn" >48 months</button>
<button id="changeRangeYTD" class="btn active">YTD</button>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="filter_div"></div>
<div id="control2"></div>
<div id="control3"></div>
<div id="chart_div" ></div>
<div id="chart_div2"></div>
<div id="table_div"></div>
</div>
</body>
</html>