从Google Visualization的ColumnChart手动选择一个栏 [英] Manually Select A Bar from Google Visualization's ColumnChart

问题描述

我使用Google Visualization的ColumnChart制作了一个图表。

它基本上是一个使用3 x 7矩阵的堆叠柱形图。在每个栏中，我删除了另外两行的数据。
我的问题是如何使黄色条（或其他条）看起来像从一开始就使用Javascript代码点击了它。就像下面。

*请注意黄色栏中的光边框。

解决方案

您可以通过调用图表上的setSelection（）以编程方式选择一个栏。这只能在ready事件被触发后才能完成，也就是说，您可以在触发此事件时设置选择，如下所示：

  google.visualization.events.addListener（图表，'ready'，readyHandler）; 
 
函数readyHandler（e）{
 chart.setSelection（[{row：1，column：1}]）; 
 
 $ / code> 

下面是一个工作示例，其中我们以编程方式选择了图表之后的第二个栏绘制： http://jsfiddle.net/FFEZT/

I made a chart using Google Visualization's ColumnChart like this.

It's basically a stacked column chart using 3 x 7 matrix. In every bar, I remove the data for two other rows. My problem is how to make the yellow bar (or other bar) looks like it has been clicked from the start using the Javascript code. Just like below.

*Notice the light border in the yellow bar.

解决方案

You can programmatically select a bar by calling setSelection() on the chart. This can only be done after the "ready" event has been fired, i.e. you can set the selection upon this event being triggered as follows:

google.visualization.events.addListener(chart, 'ready', readyHandler);

function readyHandler(e) {
    chart.setSelection([{"row":1,"column":1}]);
}

Here's a working example where we programmatically select the second bar after the chart has been drawn: http://jsfiddle.net/FFEZT/

这篇关于从Google Visualization的ColumnChart手动选择一个栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！