Google Charts - 绑定到控件时动态更改图表 x 轴答案

【问题标题】：Google Charts - Change chart x-axis dynamically when bounded to a controlGoogle Charts - 绑定到控件时动态更改图表 x 轴
【发布时间】：2015-07-30 09:54:40
【问题描述】：

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

我有一个 ChartRangeFilter ControlWrapper 绑定到 Google Charts 仪表板中的 AreaChart ChartWrapper。

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

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

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 失去功能并出现以下错误：

“一个或多个参与者未能绘制（）”

“无法读取未定义的属性‘x’”

“未定义不是函数”

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

An example of my code on jsfiddle

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

【问题讨论】：

标签： javascript google-visualization

【解决方案1】：

仪表板和/或 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]);

【讨论】：