选择外部点击事件谷歌图表上的散点图点
我有一个包含john和smith的外部ul li列表，这个列表不是散点图的一部分（这里没有定义html代码） 。 当用户单击john或smith时，应选择散点图的相关点，并将其颜色从蓝色更改为红色。
其次我使用google.visualization.events.addListener（scatterChart，’select’，tableSelectHandler）; 改变点颜色，但它的颜色没有改变。 这两种情况有没有解决方案？ 我使用以下代码。
var jsonData = '[[{"type":"number","label":"row"},{"type":"string","label":"Screen Name"},{"type":"number","label": "Followers Count"},{"type":"number","label":"Following Count"},{"type":"datetime","label":"Date"}],[1,"john",215,263,"Date(2016,1,10,17,07,38)"],[1,"smith",315,363,"Date(2016,1,10,18,07,38)"]]'; var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData)); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'width': "100%", 'filterColumnLabel': 'row', 'minValue': 1, 'maxValue': totalTweets }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 1, 'highValue': 1000} }); // Create a scatter chart, passing some options var scatterChart = new google.visualization.ChartWrapper({ 'chartType': 'ScatterChart', 'containerId': 'scatter_chart_div', 'options': { 'width': "100%", 'height': 390, 'legend': 'none', explorer : { actions : [ 'dragToZoom', 'rightClickToReset' ], }, }, // The scatter chart will use the following columns // out of all the available ones. 'view': {'columns': [4, 2]} }); google.visualization.events.addListener(scatterChart, 'select', tableSelectHandler); // 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(donutRangeSlider, scatterChart); function tableSelectHandler() { var selection = scatterChart.getChart().getSelection(); if(selection.length) { var selectedScreenName = data.getValue(selection[0].row, 1); // Select sidebar screen_name $("#" + selectedScreenName).trigger("click"); $("#scatter_chart_div div div div svg ggg circle[stroke-width='0']").attr("fill", "#fff000"); // scroll to view sidebar screen_name var position = $("#" + selectedScreenName).offset().top - $('#singleUserTimelineScreenNamesContainer').offset().top + $('#singleUserTimelineScreenNamesContainer').scrollTop(); $('#singleUserTimelineScreenNamesContainer').animate({ scrollTop: position }); var view = new google.visualization.DataView(data); view.setColumns([1,2, { type: 'string', role: 'style', calc: function (dt, i) { console.log(i); return (i == row) ? 'color: red' : null; } }]); scatterChart.draw(view); } } // Draw the dashboard. dashboard.draw(data); 最简单的方法是更改点颜色是样式列。 看起来你在那条路上。
向jsonData添加了样式列， jsonData初始样式设置为null
为scatterChart view选项添加了新的列索引
要改变颜色，请参阅……
tableSelectHandler和$('.name-container').click以单击li
google.load('visualization', '1', {'packages': ['controls'], 'callback': drawChart}); function drawChart() { var jsonData = '[[{"type":"number","label":"row"},{"type":"string","label":"Screen Name"},{"type":"number","label": "Followers Count"},{"type":"number","label":"Following Count"},{"type":"datetime","label":"Date"},{"type":"string","role":"style","p": {"html": true}}],[1,"john",215,263,"Date(2016,1,10,17,07,38)",null],[1,"smith",315,363,"Date(2016,1,10,18,07,38)",null]]'; var data = google.visualization.arrayToDataTable(jQuery.parseJSON(jsonData)); // Create a dashboard. var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard_div')); // Create a range slider, passing some options var donutRangeSlider = new google.visualization.ControlWrapper({ 'controlType': 'NumberRangeFilter', 'containerId': 'filter_div', 'options': { 'width': "100%", 'filterColumnLabel': 'row', 'minValue': 1, 'maxValue': 1000 }, // Explicitly positions the thumbs at position 3 and 8, // out of the possible range of 1 to 10. 'state': {'lowValue': 1, 'highValue': 1000} }); // Create a scatter chart, passing some options var scatterChart = new google.visualization.ChartWrapper({ 'chartType': 'ScatterChart', 'containerId': 'scatter_chart_div', 'options': { 'width': "100%", 'height': 390, 'legend': 'none', 'pointSize': 10, explorer : { actions : [ 'dragToZoom', 'rightClickToReset' ], }, }, // The scatter chart will use the following columns // out of all the available ones. 'view': {'columns': [2, 4, 5]} }); google.visualization.events.addListener(scatterChart, 'select', tableSelectHandler); // 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(donutRangeSlider, scatterChart); function tableSelectHandler() { var selection = scatterChart.getChart().getSelection(); if(selection.length) { togglePoint(selection[0].row); } } // Draw the dashboard. dashboard.draw(data); $('.name-container').click(function(e){ var selection = data.getFilteredRows([ { column: 1, value: $(this).text() } ]); if(selection.length) { togglePoint(selection[0]); } }); function togglePoint(index) { var color; for (var i = 0; i < data.getNumberOfRows(); i++) { color = (index === i) ? 'fill-color: red;' : null; data.setValue(i, data.getNumberOfColumns() - 1, color); scatterChart.draw(); } } }
- john
- smith