Google Charts：手动将焦点设置在柱形图中的数据列上 [英] Google Charts: manually set focus on column of data in Column Chart
问题描述
我正在为Google Charts ColumnChart制作自定义图例。我希望它具有与本机图例相同的行为。本地图例具有点击和鼠标悬停的行为。当单击图例键时，将选择值列。我可以通过调用
myChartWrapper.getChart（）。setSelection（[{column：4}]）在我的自定义图例中执行此操作。 ;
当一个图例键被隐藏起来时，这个值的列会得到一个轮廓。我希望在鼠标悬停在自定义图例中的关键点上时触发相同的轮廓。
有没有类似设置选区的方式来设置焦点列？
我以为我可以通过调用 events.trigger（）来完成它，但我无法获得任何东西与此同时发生。例如，这些似乎没有做任何事情。
//什么也没做：
google.visualization.events .trigger（myChartWrapper，'select'，[{column：4}]）;
//什么也没做：
google.visualization.events.trigger（myChartWrapper.getChart（），'onmouseover'，[{column：4}]）;
。这不是一个合适的解决方案，因为它不会触发图表的原生高亮。相反，这是一种通过使用jQuery操作rects的笔触来创建自己的突出显示的方法。我通过将笔画设置为2px和灰色来逼近高光。实际突出显示与svg模糊效果。为了增强突出显示效果，我对rects本身应用了一点透明度。
在鼠标悬停时，我得到了所有酒吧的rects集合，然后是特定列。事实证明，在鼠标悬停中获得正确的rects集合是非常棘手的，因为用户可能选择了一个条形图。当你用鼠标选择一个条（即点击它）时，它的矩形会左右移动，所以每次鼠标悬停时都必须重新选择这些条。 Plus选择为白色轮廓添加了另一个矩形，需要将其滤掉。
对于自定义图例，我使用Google Charts调色板中的颜色， a href =https://stackoverflow.com/questions/16680166/get-the-color-value-for-a-google-line-chart>这里。
我没有添加单击图例时会触发选择的部分。为此，我将遵循此方法。
该解决方案也仅适用于条形图。您必须使用折线图或其他类型来做其他事情。所以这个解决方案的价值可能是有限的。
google.charts.load> （'current'，{packages：['corechart']}）; google.charts.setOnLoadCallback（draw_chart）;函数draw_chart（）{//从DataTable构造函数或arrayToDatable（）创建DataTable对象var data = new google.visualization.DataTable（{rows：[{c：[{v：Sacramento}，{ v：97}，{ v：79}，{ v：67}，{ v：100}]}，{ C：[{ v： 蒙彼利埃}，{ v：96}，{ v：74}，{ v：32}，{ v：96}]}，{ C：[{ v： 朱诺}，{ v：24}，{ v：44}，{ v：54}，{ v：64}]}，{ C：[{ v： 蒙哥马利}，{ v：26}，{v：69}，{v：51}，{v：56}]}，{c：[{v：Little Rock { v：87}，{ v：69}，{ v：78}，{ v：41}]}]， COLS：[{ 类型： 串， ID ： 城市， 标签： 城市}，{ 类型： 号， 身份证： A， 标签： A}，{ 类型： 数 ， ID： B， 标签： B}，{ 类型： 号码， ID： C， 标签： C}，{ 类型：号码， ID： d， 标签： d}]}）; //添加格式化程序//创建ChartWrapper var my_chart = new google.visualization.ChartWrapper（{containerId：chart_id，dataTable：data，chartType：ColumnChart，options：{条：{groupWidth：67}，chartArea：{width：440，top：20，height：295，left：60}，height：375， ：500，fontSize：12，legend：none}}）; var bar_rect_set; var num_rows = 5; var num_cols = 4; var num_series = num_rows * num_cols; var parent_g;函数get_bar_rect_set（）{//如果有的话，//获取父级中除白色轮廓矩形之外的所有矩形。 bar_rect_set = parent_g.find（'rect [fill！=＃ffffff]'）; } google.visualization.events.addOneTimeListener（my_chart，'ready'，function（）{//获取一个bar rects的初始集合，以及它们的父级//以下，通过上面的方法获得bar rects。获得所有反射层向下三层，包括网格线和轴var g_set_1 = $（svg ggg rect）; //在开始时分割网格线并在结束时分割线轴bar_rect_set = g_set_1.slice（g_set_1.length - num_series - 1，g_set_1.length - 1）; parent_g = $（bar_rect_set [0]）。parent（）;}）; my_chart.draw（）;函数highlight_bars（series_num）{if（series_num> num_cols - 1）{return false; } get_bar_rect_set（）; var start_index = series_num * num_rows; var end_index = start_index + num_rows; var series_g_set = bar_rect_set.slice（start_index，end_index）var styles = {'stroke-width'：1.5px，stroke：#AAAAAA，opacity：.8}; series_g_set.css（样式）; } function remove_highlight（）{var styles = {'stroke-width'：0，opacity：1}; bar_rect_set.css（样式）; （）函数（函数（索引，行）{$（row）.mouseover（function（）{highlight_bars（index）;}）。 ;}）; }
.color_bar {width：24px;高度：12px的;保证金右：5px的;垂直对齐：中部; } #legend td {font-size：12;高度：19px; FONT-FAMILY： 宋体; }
< script src =https：// ajax .googleapis.com / AJAX /库/ jquery的/ 1.11.3 / jquery.min.js>< /脚本> < script src =https://www.gstatic.com/charts/loader.js>< / script> < table id =legend> < TR> < td>< div class ='color_bar'style =background-color：＃3366cc>< / div>< / td> < TD>一种与LT; / TD> < / TR> < TR> < td>< div class ='color_bar'style =background-color：＃dc3912>< / div>< / td> < TD> B< / TD> < / TR> < TR> < td>< div class ='color_bar'style =background-color：＃ff9900>< / div>< / td> < TD>℃下; / TD> < / TR> < TR> < td>< div class ='color_bar'style =background-color：＃109618>< / div>< / td> < TD> d< / TD> < / TR> < /表> < div id =chart_id>< / div>
I am making a custom legend for a Google Charts ColumnChart. I would like it to have the same behavior as the native legend. The native legend has behavior on click and mouseover. When a legend key is clicked, the column of values is selected. I can do this in my custom legend by calling
myChartWrapper.getChart().setSelection([{column: 4}]);
When a legend key is moused over, the column of values gets an outline. I would like to trigger that same outline when mousing over the key in my custom legend.
Is there a way to set that focussed column similar to setting the selection?
I thought I might be able to do it by calling events.trigger(), but I can't get anything to happen at all with that. For example, these don't seem to do anything.
// did nothing:
google.visualization.events.trigger(myChartWrapper, 'select', [{column: 4}]);
// did nothing:
google.visualization.events.trigger(myChartWrapper.getChart(), 'onmouseover', [{column: 4}]);
Here's a hacky way to highlight bars in a bar chart. It's not a proper solution because it doesn't trigger the chart's native highlight. Instead, it's a way to create your own highlight by manipulating the stroke of the rects with jQuery. I approximated the highlight by setting the stroke to be 2px and grey. The actual highlight appears to be a blur effect with svg. To enhance the highlighting, I applied a slight transparency to the rects themselves.
On mouseover, I get the set of rects for all the bars, and then the subset for the particular column. It turned out to be tricky to get the right set of rects on mouseover, because the user might have selected a bar. When you select a bar with the mouse (i.e., click on it), the rect for it moves around, so you have to select the rects anew each time you mouseover. Plus selecting adds another rect for the white outline, which needs to be filtered out.
For the custom legend, I used colors from the Google Charts palette, which you get here.
I didn't add the part that would trigger a selection on clicking the legend. For that, I will follow this method.
The solution also only works with bar charts. You'd have to do something else with line charts, or other types. So the value of this solution may be limited.
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(draw_chart);
function draw_chart() {
// Create DataTable object from DataTable constructor or arrayToDatable()
var data = new google.visualization.DataTable({"rows":[{"c":[{"v":"Sacramento"},{"v":97},{"v":79},{"v":67},{"v":100}]},{"c":[{"v":"Montpelier"},{"v":96},{"v":74},{"v":32},{"v":96}]},{"c":[{"v":"Juneau"},{"v":24},{"v":44},{"v":54},{"v":64}]},{"c":[{"v":"Montgomery"},{"v":26},{"v":69},{"v":51},{"v":56}]},{"c":[{"v":"Little Rock"},{"v":87},{"v":69},{"v":78},{"v":41}]}],"cols":[{"type":"string","id":"cities","label":"cities"},{"type":"number","id":"A","label":"A"},{"type":"number","id":"B","label":"B"},{"type":"number","id":"C","label":"C"},{"type":"number","id":"D","label":"D"}]});
// Add formatters, if any
// Create ChartWrapper
var my_chart = new google.visualization.ChartWrapper({
"containerId": "chart_id",
"dataTable": data,
"chartType": "ColumnChart",
"options": {"bar": {"groupWidth": 67}, "chartArea": {"width": 440, "top": 20, "height": 295, "left": 60}, "height": 375, "width": 500, "fontSize": 12, "legend": "none"}
});
var bar_rect_set;
var num_rows = 5;
var num_cols = 4;
var num_series = num_rows * num_cols;
var parent_g;
function get_bar_rect_set() {
// get all the rects in the parent except for the white outline rects
// on selected bars, if any.
bar_rect_set = parent_g.find('rect[fill!="#ffffff"]');
}
google.visualization.events.addOneTimeListener(my_chart, 'ready', function () {
// Get an initial collection of the bar rects, along with their parent.
// Hereafter, get the bar rects with the method above.
// get all rects three layers down, including gridlines and axis
var g_set_1 = $("svg g g g rect");
// slice out the gridlines at the beginning and the axis line at the end
bar_rect_set = g_set_1.slice(g_set_1.length - num_series - 1, g_set_1.length - 1);
parent_g = $(bar_rect_set[0]).parent();
});
my_chart.draw();
function highlight_bars(series_num) {
if (series_num > num_cols - 1) {
return false;
}
get_bar_rect_set();
var start_index = series_num * num_rows;
var end_index = start_index + num_rows;
var series_g_set = bar_rect_set.slice(start_index, end_index)
var styles = {'stroke-width': "1.5px", "stroke": "#AAAAAA", "opacity": .8};
series_g_set.css(styles);
}
function remove_highlight() {
var styles = {'stroke-width': "0", "opacity": 1};
bar_rect_set.css(styles);
}
$("#legend tr").each(function(index, row) {
$(row).mouseover(function() {
highlight_bars(index);
}).mouseout(function() {
remove_highlight();
});
});
}
.color_bar {
width:24px;
height:12px;
margin-right:5px;
vertical-align:middle;
}
#legend td {
font-size:12;
height:19px;
font-family:"Arial";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<table id="legend">
<tr>
<td><div class='color_bar' style="background-color:#3366cc"></div></td>
<td>A</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#dc3912"></div></td>
<td>B</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#ff9900"></div></td>
<td>C</td>
</tr>
<tr>
<td><div class='color_bar' style="background-color:#109618"></div></td>
<td>D</td>
</tr>
</table>
<div id="chart_id" ></div>
这篇关于Google Charts：手动将焦点设置在柱形图中的数据列上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
