我正在尝试使用Google图表在getSupportFragmentManager()中显示多条曲线，其中包含两个控件：LineChart和CategoryFilter。
我希望ChartRangeFilter仅显示ChartRangeFilter中的选定列，但我经常会遇到例外：
一个或多个参与者未能绘制（）
和/或
undefined不是对象（评估'd [0] .x'）
我认为问题在于我需要显示的数据是不连续的，这是一个例子：
CategoryFilter和我的图表的代码段：
var data = new google.visualization.DataTable();
data.addColumn('date', 'DATE');
data.addColumn('number', 'DATA.1');
data.addColumn('number', 'DATA.2');
data.addColumn('number', 'DATA.3');
data.addRows
([
[new Date(2016,9,19), 18, null, null],
[new Date(2016,9,20), 24, null, null],
[new Date(2016,9,21), 41, null, null],
[new Date(2016,9,22), 47, null, null],
[new Date(2016,9,23), 60, null, null],
[new Date(2016,9,24), 79, null, null],
[new Date(2016,9,25), null, 3, null],
[new Date(2016,9,26), null, 4, null],
[new Date(2016,9,27), null, 10, null],
[new Date(2016,9,28), null, 11, 123],
[new Date(2016,9,29), null, 4, 130],
[new Date(2016,9,30), 6, null, 132],
]);
如果<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<title>NEW CHART</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.labels{font-size: 50%;}
</style>
<script type="text/javascript" src="../cal/formatDate.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
//-------------------------------------------------------------------GOOGLE CHARTS ->
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart ()
{
var data = new google.visualization.DataTable();
data.addColumn('date', 'DATE');
data.addColumn('number', 'DATA.1');data.addColumn('number', 'DATA.2');data.addColumn('number', 'DATA.3');
data.addRows
([
[new Date(2016,9,19),18,null,null],
[new Date(2016,9,20),24,null,null],
[new Date(2016,9,21),41,null,null],
[new Date(2016,9,22),47,null,null],
[new Date(2016,9,23),60,null,null],
[new Date(2016,9,24),79,null,null],
[new Date(2016,9,25),null,3,null],
[new Date(2016,9,26),null,4,null],
[new Date(2016,9,27),null,10,null],
[new Date(2016,9,28),null,11,123],
[new Date(2016,9,29),null,4,130],
[new Date(2016,9,30),6,null,132],
]);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// populate columnsTable Rows skipping column 0
for (var i = 1; i < data.getNumberOfColumns(); i++)
{
columnsTable.addRow([i, data.getColumnLabel(i)]);
// comment out next line to have a default selection other than the whole list
// initState.selectedValues.push(data.getColumnLabel(i));
}
// set individual columns to be the default columns (not with the loop above)
// initState.selectedValues.push(data.getColumnLabel(4));
// initialize the CategoryFilter
var CategoryFilter_control = new google.visualization.ControlWrapper
({
controlType: 'CategoryFilter',
containerId: 'CategoryFilter_div',
dataTable: columnsTable,
options:
{
filterColumnLabel: 'colLabel',
ui:
{
label: 'Columns',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
'state': {'selectedValues': ['DATA.1']}
});
// initialize the LineChart
var chart = new google.visualization.ChartWrapper
({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options:
{
title: 'SOCIAL FOLLOWERS',
curveType: 'function',
interpolateNulls: 'true',
pointSize: 2,
legend: { position: 'right', textStyle:{ fontSize: 10 } },
chartArea: { left: 50, top: 10, width: "80%", height: "90%" },
trendlines:
{
0:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
1:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
2:
{
type: 'linear',
lineWidth: 1,
dataOpacity: 0.2,
showR2: false,
pointSize: 0,
visibleInLegend: false
},
}
}
});
// initialize the ChartRangeFilter
var ChartRangeFilter_control = new google.visualization.ControlWrapper
({
controlType: 'ChartRangeFilter',
containerId: 'ChartRangeFilter_div',
dataTable: data,
options:
{
filterColumnIndex: 0,
ui: { chartOptions: {height:50,width:'100%',chartArea:{left:50,width: '80%'}} }
}
});
// set the chart
function setChartView ()
{
var state = CategoryFilter_control.getState();
var row;
var view = {columns: [0]};
for (var i = 0; i < state.selectedValues.length; i++)
{
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
chart.setView(view);
chart.draw();
}
// set the ChartRangeFilter ??
function setRangeFilterView ()
{
var state = CategoryFilter_control.getState();
var row;
var view = {columns: [0]};
for (var i = 0; i < state.selectedValues.length; i++)
{
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
ChartRangeFilter_control.setView(view);
ChartRangeFilter_control.draw();
}
// display selected Range
function displayRange()
{
var v = ChartRangeFilter_control.getState();
document.getElementById('dbgchart').innerHTML = v.range.start.format("%d-%m-%Y")+ ' to ' +v.range.end.format("%d-%m-%Y");
return 0;
}
// draw the CategoryFilter
CategoryFilter_control.draw();
// bind LineChart and ChartRangeFilter
dash.bind([ChartRangeFilter_control], [chart]);
dash.draw(data);
setChartView();
setRangeFilterView();
google.visualization.events.addListener(CategoryFilter_control, 'statechange', setChartView);
google.visualization.events.addListener(CategoryFilter_control, 'statechange', setRangeFilterView);
google.visualization.events.addListener(ChartRangeFilter_control, 'statechange', displayRange);
}
//-------------------------------------------------------------------GOOGLE CHARTS <-
</script>
</head>
<body>
<h3>Social Followers Overview</h3>
<div id="dashboard">
<div id="CategoryFilter_div"></div>
<div id="chart_div" style="margin:0; padding:0; width: auto; height: 75vh"></div>
<div id="ChartRangeFilter_div"></div>
<p><span id='dbgchart' style="padding-top: 50; padding-left: 50px;"></span></p>
</div>
</body>
</html>中有 hole ，我应该怎么做以防止尝试绘制null数据？
答案 0 :(得分：0)
我在这里找到了解决方法 How to remove default error message in google chart
所以我将此代码添加到dash函数：
x但如果您移动拇指以选择缺少某些数据的范围，则会发生错误（即使已删除）并且图表也不会更改...