Question

在绘制两个系列和附加ChartRangeFilter时，我在使用Google Charts Scatterplot时遇到了麻烦。

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

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附加到Scatterplot，其中包含仪表板中的所有内容。如果我过滤 filterColumnIndex：0 ，Scatterplot仍然可以完美呈现，同时显示“正常点”和“帕累托点”。如果我过滤 filterColumnIndex：1 ，则“pareto points”消失。

Both outputs for filterColumnIndex: 0 and filterColumnIndex: 1

如何使用ChartRangeFilter过滤垂直轴并仍显示“pareto points”和“normal points”？

这是jsfiddle。

希望有人可以帮助我，我会非常感激:)。

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

Answer 1

范围过滤器会影响整个表格，而不仅仅是一个系列由于第1列中“帕累托点”的值为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 Charts - Scatter Plot + Two Series + ChartRangeFilter - 麻烦

1 个答案: