如何解决在Google条形图中隐藏注释
我正在显示基于数组数组的google条形图。它当前显示所有带有外部注释的值。如何隐藏0值并在栏中显示注释并删除词干。我正在使用的数据是动态的,因此最好是让函数检查数据并在数据视图中将其替换为null,但这还是最好的,以显示注释。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
res=[["Bob",80,0],["tom",60,0]]
google.charts.load("current",{packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
tmp=[['Name','percent1','percent2','percent3']].concat(res)
console.log(tmp)
var data = google.visualization.arrayToDataTable(tmp);
var view = new google.visualization.DataView(data);
view.setColumns([0,1,{ calc: "stringify",sourceColumn: 1,type: "string",role: "annotation" },2,sourceColumn: 2,3,sourceColumn: 3,]);
var options = {
chart: {
title: chartTitle,},bars: 'horizontal',bar: {groupWidth: "95%"},};
var chart = new google.visualization.BarChart(document.getElementById(chartName));
chart.draw(view,options);
解决方法
我们可以使用自己的函数来代替stringify函数。
如果值为零,则返回null。如果不为零,则返回格式化值...
calc: function (dt,row) {
var val = dt.getValue(row,1);
if (val !== 0) {
return dt.getFormattedValue(row,1);
} else {
return null;
}
},
,对于系列列,相同,只是返回实际值。
因此,我们不使用列索引,而是使用相同的calc函数。
calc: function (dt,1);
if (val !== 0) {
return val;
} else {
return null;
}
},type: data.getColumnType(1),label: data.getColumnLabel(1)
例如
var view = new google.visualization.DataView(data);
view.setColumns([0,{
calc: function (dt,label: data.getColumnLabel(1)
},type: "string",role: "annotation"
},2);
if (val !== 0) {
return val;
} else {
return null;
}
},type: data.getColumnType(2),label: data.getColumnLabel(2)
},2);
if (val !== 0) {
return dt.getFormattedValue(row,2);
} else {
return null;
}
},3);
if (val !== 0) {
return val;
} else {
return null;
}
},type: data.getColumnType(3),label: data.getColumnLabel(3)
},3);
if (val !== 0) {
return dt.getFormattedValue(row,3);
} else {
return null;
}
},role: "annotation"
}]);
,如果您不想重复所有的列定义,
您可以根据数据表中的列动态构建...
var columns = [0];
for (var i = 1; i < data.getNumberOfColumns(); i++) {
addColumn(i);
}
var view = new google.visualization.DataView(data);
view.setColumns(columns);
function addColumn(index) {
columns.push({
calc: function (dt,row) {
var val = dt.getValue(row,index);
if (val !== 0) {
return val;
} else {
return null;
}
},type: data.getColumnType(index),label: data.getColumnLabel(index)
});
columns.push({
calc: function (dt,index);
if (val !== 0) {
return dt.getFormattedValue(row,index);
} else {
return null;
}
},role: "annotation"
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。