javascript - 图表!值为0时如何删除数据标签
问题描述
我有一个图表,其中包含数据库中的一些值(2,1,0 ...)。我希望当值为“0”时,数字不会出现在图表上,而不是隐藏起来。
我尝试在其中使用此功能,yAxes
ticks
但它不起作用:
callback: function (datalabels) {
if (datalabels <= 0) {
style.display = 'none';
}
return datalabels;
}
我怎样才能做到这一点?
Obs:对不起英语。
async function grMeioEmpregado() {
let agressaoFisica = 0;
let armaBranca = 0;
let armaFogo = 0;
let asfixia = 0;
let fogo = 0;
let objetoContundente = 0;
let veneno = 0;
let outro = 0;
let nCI = 0;
const url = `/Crime/AjaxAgressaoFisica`
const url2 = `/Crime/AjaxArmaBranca`
const url3 = `/Crime/AjaxArmaFogo`
const url4 = `/Crime/AjaxAsfixia`
const url5 = `/Crime/AjaxFogo`
const url6 = `/Crime/AjaxObjetoContundente`
const url7 = `/Crime/AjaxVeneno`
const url8 = `/Crime/AjaxOutroMeioEmpregado`
const url9 = `/Crime/AjaxNCIMeioEmpregado`
try {
const resposta = await fetch(url);
const resposta2 = await fetch(url2);
const resposta3 = await fetch(url3);
const resposta4 = await fetch(url4);
const resposta5 = await fetch(url5);
const resposta6 = await fetch(url6);
const resposta7 = await fetch(url7);
const resposta8 = await fetch(url8);
const resposta9 = await fetch(url9);
const resultado = await resposta.json();
const resultado2 = await resposta2.json();
const resultado3 = await resposta3.json();
const resultado4 = await resposta4.json();
const resultado5 = await resposta5.json();
const resultado6 = await resposta6.json();
const resultado7 = await resposta7.json();
const resultado8 = await resposta8.json();
const resultado9 = await resposta9.json();
agressaoFisica = resultado;
armaBranca = resultado2;
armaFogo = resultado3;
asfixia = resultado4;
fogo = resultado5;
objetoContundente = resultado6;
veneno = resultado7;
outro = resultado8;
nCI = resultado9;
} catch (e) {
console.error(e);
}
const label = ['Agressão Física', 'Arma Branca', 'Arma de Fogo', 'Asfixia', 'Fogo',
'Objeto Contundente', 'Veneno', 'Outro', 'NCI - Não Consta Informação'];
const datasArr = [agressaoFisica, armaBranca, armaFogo, asfixia, fogo, objetoContundente, veneno, outro, nCI];
const sortedData = datasArr.map((v, i) => ({
rate: v,
tipos: label[i]
})).sort((o2, o1) => o1.rate - o2.rate);
var ctx = document.getElementById('grMeioEmpregado').getContext('2d');
var chart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: sortedData.map(o => o.tipos),
datasets: [{
label: 'Nº de Meios empregado',
backgroundColor: [
'RGBA(178,235,242,0.56)',
'RGBA(178,235,242,0.56)',
'RGBA(178,235,242,0.56)',
'RGBA(178,235,242,0.56)',
'RGBA(178,235,242,0.56)',
'RGBA(178,235,242,0.56)',
],
borderWidth: 1,
borderColor: 'RGBA(0,172,193,0.48)',
hoverBackgroundColor: 'RGBA(0,172,193,0.22)',
hoverBorderColor: 'RGBA(0,172,193,0.48)',
data: sortedData.map(o => o.rate),
}]
},
options: {
scales: {
xAxes: [{
ticks: {
autoSkip: false,
min: 0,
max: 10,
callback: function (value) {
return value + "%"
}
},
scaleLabel: {
display: true,
labelString: "Porcentagem"
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
}
}],
},
responsive: true,
legend: {
labels: {
fontSize: 15,
}
},
animation: {
animateScale: true,
duration: 2000,
},
plugins: {
datalabels: {
color: '#616161',
}
}
}
});
}
grMeioEmpregado();
解决方案
您可以使用formatter
而不是callback
像下面这样。
plugins: {
datalabels: {
color: '#616161',
formatter: (value) => {
return value > 0 ? value : '';
}
}
}
示例之一如下。
推荐阅读
- python - 如何使用 Python 修改 .SVG 文件的内容?
- shell - 用于从 2 个路径中删除和压缩文件的 Shell 脚本
- javascript - 如何从 nodejs 包中导出类型
- javascript - Firebase Web 实时数据库未更新
- c# - 将 Streamread 路径更改为资源文件后,控制台输出中的 C# 异常和错误格式
- django - Uncaught DOMException: Blocked a frame with origin "http://localhost:8000" from access a cross-origin frame
- reactjs - Material UI:我想让这个组件响应
- sqlite - SQLite - 删除表上的约束后,基数增长了两倍
- pandas - 如何根据熊猫中的第三列按两列分组?
- python - Python 使用 if 语句从 sys.stdin.readline() 获取数据