gpt4 book ai didi

google-visualization - Google Charts - 散点图 + 两个系列 + ChartRangeFilter - 问题

转载 作者:行者123 更新时间:2023-12-01 10:35:01 25 4
gpt4 key购买 nike

在绘制两个系列和附加到它的 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"]]) ;

散点图呈现完美,用绿色绘制“标准点”,用红色绘制“pareto 点”。我已将 ChartRangeFilter 附加到散点图,一切都在仪表板 ofc 中。如果我过滤 filterColumnIndex: 0 散点图仍然完美呈现,同时显示“正常点”和“pareto 点”。如果我过滤 filterColumnIndex: 1,“pareto 点”就会消失。

Both outputs for filterColumnIndex: 0 and filterColumnIndex: 1

如何使用 ChartRangeFilter 过滤垂直轴并仍然显示我的“pareto 点”和“正常点”?

这是一个 jsfiddle为了这。

希望有人能帮助我,我真的很感激:)。

附言这当然是虚构的数据,所以不要关心 pareto 点的值..

最佳答案

范围过滤器影响整个表格,而不仅仅是一个系列。
因为第 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-visualization - Google Charts - 散点图 + 两个系列 + ChartRangeFilter - 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37861085/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com