在外部点击事件google图表上选择散点图点 [英] select scatter plot dot on external click event google charts
问题描述
我有一个包含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：以下计数}，{type：datetime，label：日期}]，[1，john，215,263，日期（2016,1,10,17,07 ，38）]，[1，史密斯，315,363，日期（2016,1,10,18,07,38）]]'
var data = google.visualization.arrayToDataTable（jQuery.parseJSON（jsonData））;
//创建仪表板。
var dashboard = new google.visualization.Dashboard（
document.getElementById（'dashboard_div'））;
//创建范围滑块，传递一些选项
var donutRangeSlider = new google.visualization.ControlWrapper（{
'controlType'：'NumberRangeFilter'，
' containerId'：'filter_div'，
'options'：{
'width'：100％，
'filterColumnLabel'：'row'，
'minValue'：1 ，
'maxValue'：totalTweets
}，
//将拇指明确定位在位置3和8，
//可能范围为1到10.
'state'：{'lowValue'：1，'highValue'：1000}
}）;
//创建散点图，传递一些选项
var scatterChart = new google.visualization.ChartWrapper（{
'chartType'：'ScatterChart'，
' containerId'：'scatter_chart_div'，
'options'：{
'width'：100％，
'height'：390，
'legend'：'none' ，
explorer：{
actions：['dragToZoom'，'rightClickToReset']，
}，
}，
//散点图使用以下列
//所有可用的列。
'view'：{'columns'：[4，2]}
}
google.visualization.events.addListener（scatterChart，'select'，tableSelectHandler）;
//建立依赖关系，声明'filter'驱动'pieChart'，
//，以便饼图只显示允许通过
的条目//给定选择滑块范围。
dashboard.bind（donutRangeSlider，scatterChart）;
function tableSelectHandler（）{
var selection = scatterChart.getChart（）。getSelection（）;
if（selection.length）{
var selectedScreenName = data.getValue（selection [0] .row，1）;
//选择侧栏screen_name
$（＃+ selectedScreenName）.trigger（click）;
$（＃scatter_chart_div div div div svg g g g circle [stroke-width ='0']）。attr（fill，＃fff000）;
//滚动到侧边栏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）;
}
}
//绘制仪表板。
dashboard.draw（data）;
最简单的方法是改变点颜色柱。看起来你在这条路上。
向 要更改颜色，请参阅... $ b I have an external ul li list containing john and smith this list is not part of scatter chart (html code not define here). When user click on john or smith, scatter plot's related dot should be selected and change its color from blue to red. Secondly I use google.visualization.events.addListener(scatterChart, 'select', tableSelectHandler); to change dot color but its color didn't remain changed. Is there any solution for these two situations. I use following code.
The easiest way is to change point color is a style column. Looks like you were on that path. Added a style column to To change color, see...
这篇关于在外部点击事件google图表上选择散点图点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ jsonData 添加一个样式列，并将初始样式设置为 null
向中添加了新列索引 $ 查看 b
$ b
tableSelectHandler 和 $（'。点击点击 li
google.load（'visualization'，'1'，{'package'：['controls']，'callback'：drawChart}）; function drawChart（）{var jsonData ='[ ，label：关注者计数}，{type：}，label type：string，role：type：number，label：Following Count}，{type：datetime style，p：{html：true}}，[1，john，215,263，Date（2016,1,10,17,07,38），null] smith，315,363，Date（2016,1,10,18,07,38），null]]'; var data = google.visualization.arrayToDataTable（jQuery.parseJSON（jsonData））; //创建仪表板。 var dashboard = new google.visualization.Dashboard（document.getElementById（'dashboard_div'））; //创建一个范围滑块，传递一些选项var donutRangeSlider = new google.visualization.ControlWrapper（{'controlType'：'NumberRangeFilter'，'containerId'：'filter_div'，'options'：{'width'：100％ ，'filterColumnLabel'：'row'，'minValue'：1，'maxValue'：1000}，//显式地将拇指放在位置3和8，//可能的范围1到10。'state' {'lowValue'：1，'highValue'：1000}}）; //创建一个散点图，传递一些选项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']，}，}，//散点图将使用以下列//所有可用的。'view'：{'columns'：[2，4，5]}}）; google.visualization.events.addListener（scatterChart，'select'，tableSelectHandler）; //建立依赖关系，声明'filter'驱动'pieChart'，//以便饼图只显示允许通过//给定所选滑块范围的条目。 dashboard.bind（donutRangeSlider，scatterChart）; function tableSelectHandler（）{var selection = scatterChart.getChart（）。getSelection（）; if（selection.length）{togglePoint（selection [0] .row）; }} //绘制仪表板。 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
< script src =https： /www.google.com/jsapi\"></script> ;<script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> < / script>< div id =filter_div>< / div>< div id =scatter_chart_div>< / div>< ul& < li class =name-container> john< / li> < li class =name-container> smith< / li>< / ul> 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 g g g 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 and set the initial style to null
Added new column index to scatterChart view option
tableSelectHandler and $('.name-container').click for clicking ligoogle.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();
}
}
}<script src="https://www.google.com/jsapi"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="filter_div"></div>
<div id="scatter_chart_div"></div>
<ul>
<li class="name-container">john</li>
<li class="name-container">smith</li>
</ul>
