如何删除出现在谷歌图表底部的零 [英] How to remove zeros present in the bottom of google charts
本文介绍了如何删除出现在谷歌图表底部的零的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了以下图表:
我使用的javascript函数如下:
The javascript function which I have used is as follows:
<script>
google.load('visualization', '1', {packages: ['corechart', 'bar', 'table']});
google.setOnLoadCallback(loadcharts);
var dept= 'General Ward';
function drawBasic() {
//alert(dept);
var abc = $.ajax({url:'kpi23.php? dept='+dept,async:false,dataType:"json",}).responseText;
var data = new google.visualization.DataTable(abc);
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"},
3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"},
4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"},
5, {calc: "stringify", sourceColumn: 5, type: "string", role: "annotation"},
6, {calc: "stringify", sourceColumn: 6, type: "string", role: "annotation"}
]);
var options = {
chart: {
title: 'Footfall by Day of Week'
},
annotations: {
textStyle: {
fontSize: 10
}
},
height: 400,
series: {
0:{color:'#083874'},
1:{color:'#94CAFC'},
2:{color:'#EBBA25'},
3:{color:'#F59E47'},
4:{color:'#9A9FA2'}
},
vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'},
hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}},
legend: {position: 'top', maxLines: 3},
bar: {groupWidth: '70%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(
document.getElementById('chart_div'));
chart.draw(view, options);
}
我看到X轴上出现一些零,而JSON不包含任何0.如何摆脱这些零?
I see some zeros appearing in the X Axis whereas the JSON does not contain any 0's. How can I get rid of these zeros?
推荐答案
下面是一个自定义计算列的示例,如果该值也为null,则该列将为注释返回null.
Here's an example of a custom calculated column that returns null for the annotation, if the value is also null.
这很丑,因为calc:
没有通过columnIndex
.
It's ugly because calc:
doesn't pass the columnIndex
.
一种更清洁的方法可能是将注释列添加到google DataTable中,而不是使用DataView ...
A cleaner way might be to add the annotation columns to the google DataTable, instead of using a DataView...
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
"cols":[
{"label":"Month","type":"string"},
{"label":"Day Care","type":"number"},
{"label":"Semi Private","type":"number"},
{"label":"General Ward","type":"number"},
{"label":"ICU","type":"number"},
{"label":"Private","type":"number"},
{"label":"Suite","type":"number"}
],
"rows":[
{"c":[{"v":"FEB"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"JAN"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"DEC"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]},
{"c":[{"v":"NOV"},{"v":49023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}
]
});
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
formatter.format(data, 1);
formatter.format(data, 2);
formatter.format(data, 3);
formatter.format(data, 4);
formatter.format(data, 5);
formatter.format(data, 6);
var view = new google.visualization.DataView(data);
view.setColumns([0,
1, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 1);}, type: "string", role: "annotation"},
2, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 2);}, type: "string", role: "annotation"},
3, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 3);}, type: "string", role: "annotation"},
4, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 4);}, type: "string", role: "annotation"},
5, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 5);}, type: "string", role: "annotation"},
6, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 6);}, type: "string", role: "annotation"}
]);
function getAnnotation(dataTable, rowIndex, columnIndex) {
return dataTable.getFormattedValue(rowIndex, columnIndex) || null;
}
var options = {
chart: {
title: 'Footfall by Day of Week'
},
annotations: {
textStyle: {
fontSize: 10
}
},
height: 400,
series: {
0:{color:'#083874'},
1:{color:'#94CAFC'},
2:{color:'#EBBA25'},
3:{color:'#F59E47'},
4:{color:'#9A9FA2'}
},
vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'},
hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}},
legend: {position: 'top', maxLines: 3},
bar: {groupWidth: '70%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>
这篇关于如何删除出现在谷歌图表底部的零的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文