Google 图表 - 散点图 + 两个系列 + ChartRangeFilter - 问题

Question

我在绘制两个系列和附加到它的 ChartRangeFilter 时遇到 Google 图表散点图的问题。

我的数据table 看起来像这样：

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'} );

我向 table 添加了以下数据：

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"]]) ;

散点图呈现完美，用绿色绘制 "standard points"，用红色绘制 "pareto points"。我已将 ChartRangeFilter 附加到散点图，一切都在仪表板 ofc 中。如果我过滤 filterColumnIndex: 0 散点图仍然完美呈现，同时显示 "normal points" 和 "pareto points"。如果我过滤 filterColumnIndex: 1 "pareto points" 消失。

Both outputs for filterColumnIndex: 0 and filterColumnIndex: 1

如何使用 ChartRangeFilter 过滤垂直轴并仍然显示我的 "pareto points" 和 "normal points"？

这里有一个 jsfiddle。

希望有人能帮助我，我将不胜感激:)。

P.S。这当然是虚构的数据，所以不要关心 pareto 点的值..

Answer 1

范围过滤器影响整个 table，而不仅仅是一个系列。
因为第 1 列中 "pareto points" 的值是 null,
它们永远不会落入过滤器的范围内。

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

使用 getFilteredRows 构建一个 DataView，其中包含要显示的行。

参见以下示例...

google.charts.load('current', {
  callback: function () {
    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"]]
    );

    var paretoScatterOptions = {
      height: 270,
      dataOpacity: 0.4,
      tooltip: {
        textStyle: {},
        isHtml: true,
        trigger: 'both'
      },
      series: {
        1: { dataOpacity: 0.8, lineWidth: 4, color: '#a6bddb', targetAxisIndex: 1},
      },
      colors:['blue','green', 'red'],
      vAxis: {
        title: "Nodecollisions",
      },
      hAxis: {
        title: "Linkcollisions",
      },
    };

    var paretoScatterChart = new google.visualization.ChartWrapper({
      chartType: 'ScatterChart',
      containerId: 'paretoScatter',
      dataTable: paretoScatterData,
      options: paretoScatterOptions
    });
    paretoScatterChart.draw();

    var metricsControl2 = new google.visualization.ControlWrapper({
      controlType: 'ChartRangeFilter',
      containerId: 'paretoMetricControl2',
      dataTable: paretoScatterData,
      options: {
        filterColumnIndex: 1
      }
    });
    google.visualization.events.addListener(metricsControl2, 'statechange', function () {
      var paretoScatterView = new google.visualization.DataView(paretoScatterData);
      var rowsFound = paretoScatterData.getFilteredRows([{
        column: 1,
        test: function (value, row, column, table) {
          return ((table.getValue(row, column) === null) ||
                  ((table.getValue(row, column) >= metricsControl2.getState().range.start) &&
                   (table.getValue(row, column) <= metricsControl2.getState().range.end)));
        }
      }]);
      paretoScatterView.setRows(rowsFound);
      paretoScatterChart.setDataTable(paretoScatterView);
      paretoScatterChart.draw();
    });
    metricsControl2.draw();
  },
  packages:['corechart', 'scatter', 'controls']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="paretoDash">
  <div id="paretoMetricControl1" style="width:50%; float: left"></div>
  <div id="paretoMetricControl2" style="width:50%; float: left"></div>
  <div style="clear: both"></div>
  <div id="paretoScatter" class="chartContainer">
</div>

Google 图表 - 散点图 + 两个系列 + ChartRangeFilter - 问题

Google Charts - Scatter Plot + Two Series + ChartRangeFilter - Troubles

google-visualization

scatter-plot

series