javascript - Google Charts - 绑定(bind)到控件时动态更改图表 x 轴

Question

我的 DataTable 中有 5 列数据，其中第 0 列和第 4 列有不同的 x 轴值，我想根据这些值绘制，第 1-3 列有要绘制的 y 轴数据。

我有一个 ChartRangeFilter ControlWrapper 绑定(bind)到 Google Charts Dashboard 中的 AreaChart ChartWrapper。

我从将列设置为 [0,1,2,3] 的 View 开始绘制图表，该 View 工作正常，将第 0 列的值绘制为 x 轴。

然后我有一个按钮，可以使用以下 javascript 函数在将列设置为 [4,1,2,3] 和返回 [0,1,2,3] 的 View 之间切换:

function toggleView(){
    if(mode == "byTest"){
        view.setColumns([4,1,2,3]);
        chartWrapper.draw();
        dash.bind([control], [chartWrapper]);
        dash.draw(view);
        mode = "byTime";
    } else {
        view.setColumns([0,1,2,3]);
        chartWrapper.draw();
        dash.bind([control], [chartWrapper]);
        dash.draw(view);
        mode = "byTest";
    }
}

chartWrapper 更新以使用第 4 列中的新 x 轴正常，但 controlWrapper 失去功能并出现以下错误:

"One or more participants failed to draw()"

"Cannot read property 'x' of undefined"

"Undefined is not a function"

当按钮切换回使用原始列 [0,1,2,3] 时，一切再次正常。

An example of my code on jsfiddle

那么当您将图表绑定(bind)到控件时，如何动态更新 Google 图表的 x 轴？

Answer 1

看来 Dashboard 和/或 ChartWrapper 和 ControlWrapper 没有准备好尽可能多地处理不断变化的数据类型。重建整个仪表板似乎是必需的，我在这里做了:http://jsfiddle.net/dlaliberte/srrrn9sa/73/

使用这段代码:

control.clear();
control = new google.visualization.ControlWrapper({
    controlType: 'ChartRangeFilter',
    containerId: 'control_div',
    options: controlOptions
});

chartWrapper.clear();
chartWrapper = new google.visualization.ChartWrapper({
    chartType: 'AreaChart', //'LineChart',
    containerId: 'chart_div',
    options: options
});
dash.clear();
dash = new google.visualization.Dashboard(
    document.getElementById('dashboard_div'));
dash.bind([control], [chartWrapper]);