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

Question

我要做的是在一列中计算2或多个ControlWrapper上的值，但到目前为止，我只意识到我只能看到介于1 ControlWrapper和“另一个ControlWrapper和我希望使用的是a”或“not a”之间的值。

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

下面是一个关于我要做什么的例子，我希望看到1-3和6-8之间的内容，而我所拥有的(至少在这个例子中)是空的。

Answer 1

Google没有提供默认的功能来实现这一点，但是你有相当好的工具。

我利用了它们的data.getFilteredRows([{column:X, minValue:XY, maxValue:YY}])，简单地创建了两个滑块(如您的图片)，每当两个滑块“打开”时都添加一个侦听器，检查两者的minValue和maxValue，将所有四个值传递到一个函数中，然后将另一个图表的视图设置为返回的行。

我的听众看上去像这样

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
}

另外，我还想把克里斯蒂安·兰德格伦归功于太棒了的回复。

最后，这是我做的小提琴：小提琴