折线图如果全部为Null则隐藏列
Line Chart Hide Column If All Null
我正在从表中获取数据并创建图表。但是,如果列的所有值都为空/null,则会给我一个轴#0的数据列的类型不能为字符串如果一列的所有值都为null,是否有方法可以忽略/隐藏该列来创建图表?
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['vdate', 'THS', 'FT3', 'FT4'],
[new Date('08/01/2016'), 10, null, 30],
[new Date('08/02/2016'), 40, null, 60],
[new Date('08/03/2016'), 70, null, 90]
]);
var chartColors = ['#000000', '#D20000', '#5CB85C'];
var options = {
legendTextStyle: {color: '#757575'},
fontName: 'Didact Gothic',
curveType: 'function',
height: 300,
pointSize: 5,
interpolateNulls: true,
colors: chartColors,
hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}},
vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
data.addColumn({type: 'string', role: 'annotation'});
var view = new google.visualization.DataView(data);
var initialchart =[0];
var selectedColors = [];
if($("#kolom1").is(':checked')) {
initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
selectedColors.push(chartColors[0]);
}
if ($("#kolom2").is(':checked')) {
initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
selectedColors.push(chartColors[1]);
}
if ($("#kolom3").is(':checked')) {
initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
selectedColors.push(chartColors[2]);
}
view.setColumns(initialchart);
options.colors = selectedColors;
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(view, options);
$(".checkbox").change(function() {
view = new google.visualization.DataView(data);
var checkchart =[0];
var selectedColors = [];
if($("#kolom1").is(':checked')) {
checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
selectedColors.push(chartColors[0]);
}
if($("#kolom2").is(':checked')) {
checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
selectedColors.push(chartColors[1]);
}
if($("#kolom3").is(':checked')) {
checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
selectedColors.push(chartColors[2]);
}
view.setColumns(checkchart);
options.colors = selectedColors;
chart.draw(view, options);
});
},
packages: ['corechart']
});
.exams {
padding: 5px;
background: #a2a2a2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="checkboxes" style="min-height: 100px;">
<input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="exams" for="kolom1"><span class="check_icon"></span>TSH</label>
<input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="exams" for="kolom2"><span class="check_icon"></span>FT3</label>
<input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="exams" for="kolom3"><span class="check_icon"></span> FT4</label>
</div>
<div name="curve_chart" id="curve_chart"></div>
回答后更新:
我确实尝试过这个答案,如果其中一列为空,它将显示一个空图表正如我所说,我从一个表中获取数据并创建图表。我的data.addRows正确吗?
修复null:
我发现问题出在哪里,php变量为null传递空格,所以每行的最后一个值都是错误的,*here]我用php if is_null修复了它,并更新了下面的代码。
while($row = mysqli_fetch_array($results)){
if (is_null($row['check_tsh']) {$check_tsh = "null";}
if (is_null($row['check_ft3']) {$check_ft3 = "null";}
if (is_null($row['check_ft4']) {$check_ft4 = "null";}
$chartentry .= "['".date("d/m/Y", strtotime($row['vdate']))."', ".$check_tsh.", ".$check_ft3.", ".$check_ft4."],";
}
//chartentry Array: ['02/08/2016', 100,, 300],['03/08/2016', , , ],['04/08/2016', , , ],['05/08/2016', , , ]
var data = new google.visualization.DataTable();
data.addColumn('string', 'vdate');
data.addColumn('number', 'THS');
data.addColumn('number', 'FT3');
data.addColumn('number', 'FT4');
data.addRows([<?php echo $chartentry ?>]);
这是arrayToDataTable
方法的一个缺点。第一行数据的所有列中都必须具有正确类型的数据,并且不能使用{v: value, f: 'formatted value'}
语法。由于您的行中有null值,API要么假设该列的数据类型为null,要么抛出关于未获得有效数据类型的错误。要解决此问题,您必须切换到标准DataTable
构造函数:
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'vdate');
data.addColumn('number', 'THS');
data.addColumn('number', 'FT3');
data.addColumn('number', 'FT4');
data.addRows([
['08/01/2016', 10, null, 30],
['08/02/2016', 40, null, 60],
['08/03/2016', 70, null, 90]
]);
var chartColors = ['#000000', '#D20000', '#5CB85C'];
var options = {
legendTextStyle: {color: '#757575'},
fontName: 'Didact Gothic',
curveType: 'function',
height: 300,
pointSize: 5,
interpolateNulls: true,
colors: chartColors,
hAxis: {title: 'Visit', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}},
vAxis: {title: 'Prices', titleTextStyle: {fontName: 'Didact Gothic', color: '#757575'}, textStyle:{color: '#757575'}, viewWindow: {min:0}}
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
data.addColumn({type: 'string', role: 'annotation'});
var view = new google.visualization.DataView(data);
var initialchart =[0];
var selectedColors = [];
if($("#kolom1").is(':checked')) {
initialchart.push(1,{ calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
selectedColors.push(chartColors[0]);
}
if ($("#kolom2").is(':checked')) {
initialchart.push(2,{ calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
selectedColors.push(chartColors[1]);
}
if ($("#kolom3").is(':checked')) {
initialchart.push(3,{ calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
selectedColors.push(chartColors[2]);
}
view.setColumns(initialchart);
options.colors = selectedColors;
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(view, options);
$(".checkbox").change(function() {
view = new google.visualization.DataView(data);
var checkchart =[0];
var selectedColors = [];
if($("#kolom1").is(':checked')) {
checkchart.push(1,{calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"});
selectedColors.push(chartColors[0]);
}
if($("#kolom2").is(':checked')) {
checkchart.push(2,{calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"});
selectedColors.push(chartColors[1]);
}
if($("#kolom3").is(':checked')) {
checkchart.push(3,{calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"});
selectedColors.push(chartColors[2]);
}
view.setColumns(checkchart);
options.colors = selectedColors;
chart.draw(view, options);
});
},
packages: ['corechart']
});
.exams {
padding: 5px;
background: #a2a2a2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="checkboxes" style="min-height: 100px;">
<input type="checkbox" class="checkbox" style="display: none;" id="kolom1" checked="checked" /><label class="exams" for="kolom1"><span class="check_icon"></span>TSH</label>
<input type="checkbox" class="checkbox" style="display: none;" id="kolom2" checked="checked" /><label class="exams" for="kolom2"><span class="check_icon"></span>FT3</label>
<input type="checkbox" class="checkbox" style="display: none;" id="kolom3" checked="checked" /><label class="exams" for="kolom3"><span class="check_icon"></span> FT4</label>
</div>
<div name="curve_chart" id="curve_chart"></div>
请参阅此处的工作代码https://jsfiddle.net/bqacua6y/
请参阅此处的详细说明https://groups.google.com/forum/?fromgroups=#!主题/谷歌可视化api/2Jafk8PyjV4
相关文章:
- 数组在递归方法中设置为null
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 显示5秒后隐藏潜水
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 浮动页脚栏-使用Bootstrap隐藏
- 在jquery中为显示/隐藏设置cookie
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 从var向代码隐藏函数传递值
- Image赢得't隐藏在滚动jQuery上
- 具有rowGrouping的数据表无法隐藏列
- ASP.net Javascript函数中的隐藏字段为null
- 有没有办法使用 Javascript 将 ASP.Net 隐藏字段值设置为 NULL
- 如果未找到动态音频 src 或为 null,请使用 javascript 隐藏 HTML5 音频播放器
- Highcharts -- 隐藏零值而不使用“null”
- 当表达式中存在数学时,如果为null,如何隐藏角度表达式
- 如果过滤器返回null,如何隐藏元素
- 当显示的内容在数据库中为NULL值时隐藏DIV
- 如果rowData为null,如何隐藏ag-grid
- 折线图如果全部为Null则隐藏列