Question

我想要做的是在一列中计算我在2个或更多ControlWrapper上的值，但到目前为止我只意识到我只能看到1个ControlWrapper＆＃34;和＃34;之间的值。另一个ControlWrapper，我希望使用＆＃34;或＆＃34;不是＆＃34;和＆＃34;。

http://i.stack.imgur.com/fl2kd.png

这是一个关于我要做什么的例子的图像，我希望看到1-3和6-8之间的内容以及我得到的回报（至少在这个例子中）是空的

Answer 1

默认情况下Google没有提供实现此功能的功能，但您拥有相当不错的工具我已经使用了他们的data.getFilteredRows([{column:X, minValue:XY, maxValue:YY}])，只需创建两个滑块（就像你的图片一样），只要两个中的任何一个被更改，就会添加一个监听器，并检查minValue和maxValue of both，将所有四个值传递给一个函数，然后将另一个图表的视图设置为返回的行。

我的听众看起来像这样

google.visualization.events.addListener(control, 'statechange', function () {
    stateChangeFunction();
});

stateChangeFunction()看起来像这样

function stateChangeFunction() {
    var lowFilter1 = control.getState().lowValue;
    var highFilter1 = control.getState().highValue;
    var lowFilter2 = control2.getState().lowValue;
    var highFilter2 = control2.getState().highValue;

    customFilterChart.setView({
        'rows': customFilter(lowFilter1, highFilter1, lowFilter2, highFilter2)
    });
    customFilterChart.draw();
};

它只读取两个滑块的高值和低值，然后将customFilteredChart的视图设置为此函数返回的行

function customFilter(low1, high1, low2, high2) {
    var rows = []
//Using googles own getFilteredRows
    rows = data.getFilteredRows([{
        column: 1,
        minValue: low1,
        maxValue: high1
    }]);
//Then doing the same with the other two values.
    rows = rows.concat(data.getFilteredRows([{
        column: 1,
        minValue: low2,
        maxValue: high2
    }]));
//Removing duplicate rows to avoid displaying them twice.
    var uniqueRows = rows.reduce(function(a,b){if(a.indexOf(b)<0)a.push(b);return a;},[]);

    return uniqueRows
}

此外，我还要Christian Landgren来回复this wonderful。

最后，这是我制作的小提琴：Fiddle

如何计算谷歌图表仪表板上的仪表板控件

1 个答案: