Javascript 谷歌图表：将ChartRangeFilter与数据系列选择器相结合

随着时间的推移，我有一大组8个系列的数据，目前我有两个工作图，一个有一个范围选择器（允许您滑动一个栏来选择要显示的日期），另一个可以单击图表图例来选择要显示的系列和要隐藏的系列

不过，我还没能将它们结合到一个统一的仪表板中，使两者都能同时完成。此特定代码允许您过滤日期，但隐藏/显示序列不起作用。我尝试了各种组合来代替最后一行（chart.draw（view）；），例如重新绘制仪表板和重新绑定仪表板，但仍然无法使其工作。如有任何建议，将不胜感激。以下是相关代码（编辑以包含示例json_obj）：

var json_obj={
“cols”：[{“label”：“Date”，“type”：“Date”}，
{“标签”：“F1”，“类型”：“编号”}，
{“标签”：“F2”，“类型”：“编号”}，
{“标签”：“F3”，“类型”：“编号”}，
{“标签”：“F4”，“类型”：“编号”}]，
“行”：[{
“c”：[{“v”：日期（6,1,14）}，
{“v”：.25}，
{“v”：.55}，
{“v”：.12}，
{“v”：.067}
]
},
{
“c”：[{“v”：日期（6,2,14）}，
{“v”：.27}，
{“v”：.52}，
{“v”：.18}，
{“v”：.055}
]
},
{
“c”：[{“v”：日期（6,3,14）}，
{“v”：.30}，
{“v”：.60}，
{“v”：.17}，
{“v”：.043}
]
},
{
“c”：[{“v”：日期（6,4,14）}，
{“v”：.33}，
{“v”：.57}，
{“v”：.14}，
{“v”：.05}
]
}]
};
var data=new google.visualization.DataTable（json_obj）；
var formatter=new google.visualization.NumberFormat({
图案：“#.###%”
});
对于（i=1；i 0）{
系列[i-1]={}；
}
}
var control=new google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
集装箱：“控制”，
选项：{
//按日期轴过滤。
filterColumnIndex:0，
用户界面：{
图表类型：“线条图”，
图表选项：{
哈克斯：{
baselineColor:“无”，
格式：年月日
}
},
//以毫秒为单位的一天=24*60*60*1*1000=86400000
最小范围大小：86400000
}
}
});
var chart=new google.visualization.ChartWrapper({
图表类型：“线条图”，
集装箱船：“海图”，
选项：{
标题：“功能用户随时间变化”，
言辞：{
标题：“用户百分比”，
格式：“#.###%”，
视图窗口：{min:0}
},
线宽：2，
curveType:'函数'，
系列：系列
}
});
仪表板绑定（控件、图表）；
仪表盘.绘图（数据）；
google.visualization.events.addListener（图表，'select'，函数（）{
var sel=chart.getSelection（）；
//如果选择长度为0，则取消选择一个元素
如果（选择长度>0）{
//如果行未定义，则单击图例
如果（sel[0]。行===null）{
var col=sel[0]。列；
if（列[col]==col）{
//隐藏数据系列
列[col]={
标签：data.getColumnLabel（col），
类型：data.getColumnType（col），
计算：函数（）{
返回null；
}
};
//灰色显示图例条目
系列[col-1]。颜色='#cccc'；
}
否则{
//显示数据系列
列[col]=col；
系列[col-1]。颜色=null；
}
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（列）；
图表。绘制（视图）；
}
}
});

如果行可以“未定义”，则需要检查：

if (!sel[0].row)

…或

…而不是

if (sel[0].row === null)

…因为每种情况下的结果都不同

看

---

编辑：对于fix JSFIDLE示例。

您几乎拥有它；您需要更改图表的

系列

选项，并设置图表的

视图

参数，而不是创建数据视图。更换这些线路：

var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view);

有了这些：

chart.setOption('series', series);
chart.setView({columns: columns});
chart.draw();

---

这似乎并没有解决问题：/我仍然得到一个“未捕获的TypeError:未定义的不是函数”你能用

json_obj

的样本更新你的问题吗？这样我就可以测试它了？用样本json_obj更新。谢谢

var view = new google.visualization.DataView(data);
view.setColumns(columns);
chart.draw(view);

chart.setOption('series', series);
chart.setView({columns: columns});
chart.draw();