Google visualization 谷歌图表-散点图+；两个系列+；ChartRange过滤器-故障

我在绘制两个系列和一个附加的ChartRangeFilter时遇到了谷歌图表散点图的问题

我的数据表如下所示：

var paretoScatterData = new google.visualization.DataTable();
paretoScatterData.addColumn('number', "Nodecollisions");
paretoScatterData.addColumn('number', "Linkcollisions");
paretoScatterData.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
paretoScatterData.addColumn( {'type': 'string', 'role': 'style'} );
paretoScatterData.addColumn('number', 'Paretofront');
paretoScatterData.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
paretoScatterData.addColumn( {'type': 'string', 'role': 'style'} );

我在表中添加了以下数据：

paretoScatterData.addRows(
[[0,1,"asd","fill-color:green", null, null, null],
[0,2,"asd","fill-color:green", null, null, null],
[0,3,"asd","fill-color:green", null, null, null],
[0,4,"asd","fill-color:green", null, null, null],
[0,5,"asd","fill-color:green", null, null, null],
[5,null,null,null, 0, "asd", "fill-color: red"],
[4,null,null,null, 0, "asd", "fill-color: red"],
[3,null,null,null, 0, "asd", "fill-color: red"],
[2,null,null,null, 0, "asd", "fill-color: red"],
[1,null,null,null, 0, "asd", "fill-color: red"]]) ;

散点图呈现完美，用绿色绘制“标准点”，用红色绘制“帕累托点”。我在散点图上附加了一个ChartRangeFilter，一切都在ofc的仪表板上。如果我过滤filterColumnIndex:0，则散点图仍能完美渲染，同时显示“法线点”和“帕累托点”。如果我筛选filterColumnIndex:1，“帕累托点”将消失

如何使用ChartRangeFilter过滤垂直轴，并仍然显示“pareto点”和“法线点”

这里有一个例子

希望任何人能帮助我，我将非常感激：）

---

注：这当然是虚构的数据，因此不必关心帕累托点的值。

范围过滤器影响整个表格，而不仅仅是一个系列。
由于第1列中“帕累托点”的值为

null

，
它们永远不会落入过滤器的范围

因此，您需要独立绘制图表和控制，
然后在控件更改时重新绘制图表

使用

getFilteredRows

构建包含要显示行的

DataView

请参阅下面的示例

google.charts.load（'current'{
回调：函数（）{
var paretoScatterData=新的google.visualization.DataTable（）；
paretoScatterData.addColumn（'number'，'Nodecollisions'）；
paretoScatterData.addColumn（'number'，'linkColumns'）；
addColumn（{type:'string'，role:'tooltip'，p'：{'html'：true}}）；
addColumn（{'type'：'string'，'role'：'style'}）；
addColumn（'number'，'Paretofront'）；
addColumn（{type:'string'，role:'tooltip'，p'：{'html'：true}}）；
addColumn（{'type'：'string'，'role'：'style'}）；
paretoScatterData.addRows(
[[0,1，“asd”，“填充颜色：绿色”，空，空，空]，
[0,2，“asd”，“填充颜色：绿色”，空，空，空]，
[0,3，“asd”，“填充颜色：绿色”，空，空，空]，
[0,4，“asd”，“填充颜色：绿色”，空，空，空]，
[0,5，“asd”，“填充颜色：绿色”，空，空，空]，
[5，null，null，null，0，“asd”，“填充颜色：红色”]，
[4，null，null，null，0，“asd”，“填充颜色：红色”]，
[3，null，null，null，0，“asd”，“填充颜色：红色”]，
[2，null，null，null，0，“asd”，“填充颜色：红色”]，
[1，null，null，null，0，“asd”，“填充颜色：红色”]]
);
var帕累托散射选项={
身高：270，
数据不透明度：0.4，
工具提示：{
文本样式：{}，
伊什特尔：没错，
触发器：“两个”
},
系列：{
1:{dataOpacity:0.8，线宽：4，颜色：'#a6bddb'，targetAxisIndex:1}，
},
颜色：[“蓝色”、“绿色”、“红色”]，
言辞：{
标题：“节点冲突”，
},
哈克斯：{
标题：“链接冲突”，
},
};
var paretoScatterChart=新的google.visualization.ChartWrapper({
图表类型：“散点图”，
集装箱运输：“帕累托散射”，
数据表：paretoScatterData，
选项：paretoScatterOptions
});
paretoScatterChart.draw（）；
var metricsControl2=新的google.visualization.ControlWrapper({
controlType:“ChartRangeFilter”，
集装箱：“paretoMetricControl2”，
数据表：paretoScatterData，
选项：{
filterColumnIndex:1
}
});
google.visualization.events.addListener（metricsControl2，'statechange'，函数（）{
var paretoScatterView=新的google.visualization.DataView（paretoScatterData）；
var rowsFound=paretoScatterData.getFilteredRows([{
专栏：1，
测试：函数（值、行、列、表）{
返回（（table.getValue（行、列）==null）||
（（table.getValue（行、列）>=metricsControl2.getState（）.range.start）&&
（table.getValue（行、列）太棒了！这很有魅力。非常感谢你的帮助，伙计！