для гистограммы, getSelection() возвращает только индекс выбранного бара,
не возвращает индексы строк из таблицы данных,
, как это происходит с другими диаграммами.
в этом случае нам нужно использовать -> getChartLayoutInterface()
интерфейс макета - это объект, который мы можем использовать, чтобы найти положение различных элементов диаграммы.
сначала мы используем getSelection(), чтобы определить, какой столбец и / или серия выбраны.
getSelection() вернет что-то похожее на -> [{"row":3,"column":1}]
, где row - выбранный столбец, column - столбец таблицы данных,
и column - 1 - индекс ряда.
далее мы используем метод интерфейса макета -> getBoundingBox(id)
, где id - идентификатор элемента диаграммы, для бара он принимает следующий формат.
bar#series#row - bar#0#3
как таковой, getBoundingBox('bar#0#3') даст нам размеры четвертого стержня.
что-то вроде -> {"left":381,"top":60.5,"width":89,"height":103}
тогда мы можем использовать метод интерфейса макета - > getHAxisValue(position)
это вернет значение по оси X для данной позиции
, предоставив левую и правую координаты бара,
мы можем определить минимальное и максимальное значения диапазон
с диапазоном, мы можем затем отфильтровать таблицу данных, чтобы определить, какие строки составляют полосу.
вот фрагмент ...
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
minValue: chartLayout.getHAxisValue(barBounds.left),
maxValue: chartLayout.getHAxisValue(barBounds.left + barBounds.width)
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(JSON.stringify(ids));
}
});
РЕДАКТИРОВАТЬ
количество элементов в приведенном фрагменте отключено.
вместо для использования minValue & maxValue,
нам нужно использовать функцию test.
где значение каждой строки равно ...
>= min value of the range
< max value of the range
выше было >= & <=
, и нам также может понадобиться использовать Math.ceil на минимальном значении,
и Math.floor на максимальном значении.
следующий фрагмент синхронизируется c с диаграммой ...
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
test: function (value) {
return ((value >= Math.ceil(chartLayout.getHAxisValue(barBounds.left))) &&
(value < Math.floor(chartLayout.getHAxisValue(barBounds.left + barBounds.width))));
}
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(ids.length);
}
});
см. Следующий рабочий пример ...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['pt_network_seg_id','speed'],
['9',32],
['10',22],
['13',23],
['14',18],
['15',34],
['17',22],
['18',30],
['19',20],
['20',33],
['21',26],
['22',33],
['23',21],
['24',19],
['25',41],
['26',23],
['27',16],
['28',39],
['29',15],
['30',25],
['31',26],
['32',29],
['40',31],
['41',9],
['42',27],
['44',25],
['45',10],
['46',25],
['47',24],
['48',20],
['49',20],
['50',25],
['51',19],
['52',34],
['53',19],
['54',27],
['56',27],
['58',10],
['59',26],
['60',54],
['62',54],
['64',17],
['68',27],
['74',43],
['75',10],
['76',32],
['77',47],
['78',31],
['80',24],
['84',20],
['85',35],
['86',33],
['88',25],
['89',26],
['91',35],
['93',25],
['94',18],
['95',24],
['98',34],
['100',23],
['101',36],
['102',18],
['103',21],
['105',16],
['106',26],
['107',29],
['109',8],
['111',16],
['112',19],
['113',33],
['114',20],
['115',18],
['116',21],
['117',14],
['126',22],
['127',26],
['130',24],
['131',10],
['133',29],
['134',26],
['135',22],
['136',16],
['137',14],
['139',23],
['140',17],
['141',18],
['142',19],
['143',15],
['144',25],
['145',19],
['146',23],
['147',18],
['148',50],
['150',47],
['151',13],
['152',37],
['153',24],
['156',22],
['157',21],
['158',40],
['159',34],
['160',12],
['161',22],
['165',18],
['168',24],
['169',23],
['171',20],
['172',22],
['173',25],
['175',30],
['176',24],
['177',15],
['178',25],
['179',0],
['181',28],
['182',21],
['183',17],
['184',22],
['185',40],
['187',24],
['188',22],
['189',21],
['190',8],
['191',18],
['192',23],
['193',33],
['194',30],
['195',32],
['196',33],
['197',31],
['198',34],
['199',34],
['200',31],
['201',31],
['203',20],
['204',34],
['205',32],
['206',19],
['210',24],
['211',32],
['212',29],
['213',19],
['214',20],
['215',19],
['216',21],
['217',24],
['218',27],
['219',22],
['220',20],
['221',17],
['222',18],
['223',34],
['224',35],
['229',19],
['230',22],
['231',21],
['232',23],
['234',27],
['235',22],
['236',12],
['237',17],
['238',16],
['239',19],
['240',33],
['241',13],
['242',24],
['243',25],
['244',19],
['245',19],
['246',17],
['247',23],
['248',22],
['250',12],
['252',10],
['253',13],
['254',17],
['256',23],
['257',16],
['258',20],
['259',24],
['260',36],
['263',15],
['264',19],
['266',24],
['267',14],
['270',17],
['271',23],
['272',14],
['274',21],
['277',26],
['279',18],
['280',27],
['281',26],
['282',19],
['283',23],
['284',19],
['288',49],
['289',37],
['290',31],
['291',50],
['296',17],
['297',29],
['299',17],
['301',32],
['302',34],
['304',17],
['305',32],
['306',23],
['307',34],
['309',27],
['314',20],
['316',39],
['317',48],
['318',34],
['319',46],
['326',16],
['329',0],
['330',17],
['334',15],
['338',4],
['339',14],
['341',23],
['346',31],
['347',27],
['348',39],
['349',20],
['350',18],
['351',16],
['352',20],
['353',20],
['354',18],
['355',29],
['356',22],
['360',18],
['362',0],
['363',27],
['367',25],
['368',15],
['369',23],
['370',31],
['371',43],
['373',13],
['374',30],
['375',43],
['376',27],
['377',44],
['379',35],
['380',23],
['382',41],
['383',31],
['384',28],
['385',23],
['386',19],
['387',22],
['388',30],
['389',31],
['390',3],
['391',38],
['393',7],
['394',34],
['396',31],
['397',31],
['398',24],
['399',39],
['400',31],
['401',31],
['402',27],
['403',12],
['405',7],
['406',23],
['408',24],
['409',35],
['410',32],
['411',31],
['412',33],
['415',0],
['416',25],
['417',17],
['418',14],
['420',9],
['421',16],
['422',24],
['423',49],
['424',31],
['426',31],
['427',25],
['428',33],
['429',23],
['430',31],
['431',29],
['433',27],
['434',14],
['435',22],
['436',48],
['437',30],
['438',17],
['439',12],
['442',18],
['443',32],
['444',26],
['445',14],
['446',17],
['447',13],
['450',20],
['451',25],
['452',24],
['454',14],
['455',19],
['456',23],
['457',15],
['458',20],
['459',23],
['460',21],
['461',30],
['462',15],
['463',26],
['464',16],
['465',22],
['466',20],
['467',28],
['468',22],
['469',27],
['470',15],
['476',8],
['478',7],
['479',14],
['481',14],
['482',8],
['483',17],
['484',16],
['485',10],
['487',10],
['488',17],
['492',12],
['493',18],
['496',22],
['497',14],
['498',19],
['500',17],
['501',13],
['503',9],
['504',16],
['505',19],
['506',19],
['507',25],
['508',27],
['510',15],
['512',12],
['514',8],
['515',18],
['517',20],
['518',14],
['519',19],
['520',16],
['522',15],
['523',18],
['525',20],
['526',21],
['527',21],
['528',21],
['529',26],
['531',21],
['533',4],
['535',16],
['536',0],
['537',16],
['538',16],
['539',19],
['540',24],
['541',17],
['542',12],
['543',16],
['545',16],
['546',15],
['547',11],
['549',8],
['550',13],
['551',26],
['552',35],
['553',20],
['554',17],
['556',0],
['557',13],
['558',14],
['559',13],
['561',13],
['563',18],
['564',19],
['566',10],
['567',23],
['568',8],
['570',49],
['571',20],
['572',36],
['573',27],
['574',0],
['575',24],
['576',13],
['577',51],
['578',0],
['579',16],
['582',13],
['583',16],
['584',17],
['585',15],
['586',19],
['589',13],
['590',20],
['591',18],
['593',21],
['594',28],
['595',35],
['596',20],
['597',9],
['598',5],
['599',12],
['600',21],
['601',16],
['602',7],
['604',22],
['605',44],
['607',40],
['608',27],
['609',16],
['610',17],
['612',15],
['613',14],
['614',39],
['615',13],
['618',7],
['620',13],
['621',13],
['623',27],
['624',13],
['625',13],
['628',16],
['629',15],
['630',28],
['631',10],
['633',18],
['634',12],
['636',14],
['638',35],
['639',6],
['640',14],
['641',14],
['642',14],
['643',28],
['644',29],
['645',21],
['649',15],
['650',21],
['651',22],
['652',20],
['653',24],
['654',19],
['655',17],
['656',15],
['657',14],
['659',11],
['660',12],
['663',29],
['664',14],
['666',6],
['667',30],
['669',7],
['670',9],
['671',29],
['672',19],
['676',19],
['679',23],
['680',16],
['681',19],
['682',16],
['683',35],
['684',17],
['685',29],
['687',35],
['688',21],
['689',22],
['691',20],
['692',19],
['693',34],
['694',26],
['695',21],
['697',25],
['698',20],
['700',24],
['701',24],
['702',25],
['703',24],
['704',18],
['706',20],
['707',15],
['708',26],
['711',9],
['712',30],
['713',28],
['714',49],
['716',23],
['717',21],
['718',33],
['719',22],
['720',22],
['722',19],
['723',47],
['725',16],
['726',12],
['727',23],
['728',18],
['730',36],
['731',17],
['732',18],
['733',31],
['735',31],
['737',17],
['738',15],
['739',18],
['741',28],
['742',28],
['743',26],
['744',24],
['745',0],
['746',25],
['747',22],
['748',24],
['753',26],
['755',35],
['756',26],
['757',36],
['758',25],
['759',23],
['760',23],
['761',13],
['762',18],
['763',22],
['764',29],
['765',20],
['766',25],
['767',20],
['769',18],
['770',21],
['773',14],
['774',21],
['781',38],
['783',29],
['784',24],
['785',31],
['786',33],
['790',30],
['791',13],
['792',19],
['793',20],
['794',20],
['796',15],
['797',23],
['798',20],
['799',16],
['801',36],
['802',40],
['803',29],
['805',33],
['809',27],
['810',23],
['811',28],
['812',22],
['813',25],
['815',4],
['816',19],
['817',30],
['818',34],
['819',20],
['820',19],
['821',20],
['822',14],
['823',20],
['824',23],
['827',14],
['829',31],
['830',14],
['831',32],
['832',38],
['834',17],
['835',32],
['841',21],
['845',40],
['847',14],
['848',13],
['849',15],
['850',10],
['851',13],
['852',14],
['854',23],
['855',22],
['857',18],
['858',16],
['859',25],
['860',15],
['862',15],
['863',13],
['864',25],
['865',22],
['867',19],
['868',19],
['869',20],
['870',18],
['872',19],
['873',7],
['875',19],
['876',19],
['877',13],
['878',19],
['879',25],
['880',26],
['882',33],
['883',21],
['884',36],
['888',27],
['889',14],
['891',22],
['893',13],
['894',14],
['895',21],
['898',6],
['900',21],
['901',31],
['902',21],
['903',15],
['904',11],
['913',21],
['915',13],
['916',14],
['917',32],
['918',32],
['922',28],
['923',19],
['924',18],
['926',26],
['930',13],
['931',10],
['933',19],
['934',27],
['935',6],
['937',4],
['938',13],
['940',27],
['941',16],
['945',16],
['946',14],
['948',0],
['949',22],
['952',17],
['953',21],
['954',25],
['955',21],
['956',21],
['957',6],
['958',8],
['959',24],
['960',28],
['961',45],
['962',23],
['963',19],
['964',13],
['965',14],
['966',40],
['967',9],
['968',22],
['969',18],
['970',24],
['971',18],
['973',37],
['974',52],
['976',17],
['977',24],
['978',14],
['979',28],
['980',32],
['982',23],
['983',24],
['985',30],
['986',13],
['989',19],
['990',23],
['992',21],
['993',22],
['995',31],
['996',27],
['997',24],
['999',25],
['1000',27],
['1002',10],
['1003',19],
['1004',29],
['1005',6],
['1006',10]
]);
var options = {
title: 'Distribution of Bus Speeds on Beer Sheva PT Segments 7-10AM',
hAxis: {
title: 'Bus Speeds (kph)',
titleTextStyle: {
italic: false
}
},
vAxis: {
title: 'PT Segments Count',
titleTextStyle: {
italic: false
}
},
legend: {
position: 'none'
},
histogram: {
bucketSize: 5
},
colors:['red', 'yellow']
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
// get position of selected bar
var chartLayout = chart.getChartLayoutInterface();
var barBounds = chartLayout.getBoundingBox('bar#' + (selection[0].column - 1) + '#' + selection[0].row);
// get rows for selected bar
var rows = data.getFilteredRows([{
column: selection[0].column,
test: function (value) {
return ((value >= Math.ceil(chartLayout.getHAxisValue(barBounds.left))) && (value < Math.floor(chartLayout.getHAxisValue(barBounds.left + barBounds.width))));
}
}]);
// create data view for selected rows
var view = new google.visualization.DataView(data);
view.setRows(rows);
// get ids of selected bar
var ids = view.getDistinctValues(0);
console.log(ids.length);
}
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>