Google Charts - 散布図+ 2系列+ ChartRangeFilter - トラブル

Question

2つの系列をプロットするときにGoogle Charts散布図に問題があり、それにChartRangeFilterが添付されています。

私のDataTableには以下のようになります。

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をスキャッタプロットに添付しました。 filterColumnIndex：0のフィルタリングを行っても、スキャッタプロットは完全にレンダリングされ、「ノーマルポイント」と「パレートポイント」の両方が表示されます。 filterColumnIndex：1の場合、「パレート点」が消えます。

Both outputs for filterColumnIndex: 0 and filterColumnIndex: 1

私はChartRangeFilterで、縦軸をフィルタリングするために何を行うことができますし、まだ私の「パレート・ポイント」と「通常のポイント」を示しますか？

ここには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>