- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在绘制两个系列和附加到它的 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/
我想知道您是否可以将 ChartRangeFilter 用于此类图表。由于根据您的搜索,此数据将继续横向增长。是的,我必须使用气泡。否则我可以进行水平滚动,但垂直轴不会移动。 我不知道在帖子里还能放什
我正在使用 AngularJS Google Chart显示 line chart . 我正在阅读 ChartRangeFilter并需要在我的图表中使用它。是否可以从 AngularJs Googl
我目前有一个折线图,它的 x 轴上有日期,y 轴上有数字(通过 json/php-mysql)。一切都按预期工作,但我想使用范围内的值(最小值、最大值、平均值等) 我可以像这样获取两个 slider
我已经实现了一个折线图,用于绘制来自地理编码地址的 JSON 数据。该图有很多类别,我还实现了一个工作正常的类别过滤器。该图的时间线是从一月到十二月,我想让用户能够可视化特定月份。谷歌可视化 Char
我有一个持续将温度数据附加到折线图的应用程序。当新数据附加到图表时,它不会显示,因为 ChartRangeFilter 的最大范围不包括它,即使它在更新之前位于最右边。为了显示新数据,您必须手动调整范
在绘制两个系列和附加到它的 ChartRangeFilter 时,我在使用 Google Charts Scatterplot 时遇到了问题。 我的数据表看起来像这样: var paretoScatt
我可以将事件处理程序添加到 ChartRangeFilter controlWrapper 以查明 slider 何时移动: google.visualization.events.addListen
hAxis 上的日期如下图所示正确显示。 但是当我将控件过滤器调整到某个范围时,日期开始显示错误。 有什么方法可以处理此类异常? 这是一个示例链接以供审核: http://codepen.io/pen
下面的代码应该从 CSV 文件填充 DataView。然后将 DataView 馈送到 DashBoard,其中包括绑定(bind)在一起的 LineChart 和 ChartRangeFilter。
我是一名优秀的程序员,十分优秀!