javascript - Chart.js maxBarThickness 选项不起作用
问题描述
我一直在尝试为条形设置一个阈值,因为当我只有一个条形时,它会变得非常大并且不可取。
这是我尝试设置条形大小限制的地方,但没有结果。
function carregarBarraDatasMensais() {
$.get("/monitoria/capitalizacao/aderente/faturas/pendentes/pormes/dashboardservico", function (model){
$("#cnvBarDataMes").html("");
$("#cnvBarDataMes").html("<canvas id='cnvDataMes'></canvas>");
var ctx = $("#cnvDataMes");
var datas = Object.keys(model);
var dataErro = [];
var dataProcessada = [];
var dataProcessadaAtrasada = [];
var dataNaoProcessada = [];
var dataNaoProcessadaAtrasada = [];
for (var i = 0; i < datas.length; i++){
var erro = model[datas[i]]["ERRO_PROCESSAMENTO"];
dataErro[i] = erro == undefined ? 0 : erro.length;
}
for (var i = 0; i < datas.length; i++){
var processado = model[datas[i]]["PROCESSADA"];
dataProcessada[i] = processado == undefined ? 0 : processado.length;
}
for (var i = 0; i < datas.length; i++){
var processadoAtrasado = model[datas[i]]["PROCESSADA_ATRASADA"];
dataProcessadaAtrasada[i] = processadoAtrasado == undefined ? 0 : processadoAtrasado.length;
}
for (var i = 0; i < datas.length; i++){
var naoProcessado = model[datas[i]]["NAO_PROCESSADA"];
dataNaoProcessada[i] = naoProcessado == undefined ? 0 : naoProcessado.length;
}
for (var i = 0; i < datas.length; i++){
var naoProcessadoAtrasado = model[datas[i]]["NAO_PROCESSADA_ATRASADA"];
dataNaoProcessadaAtrasada[i] = naoProcessadoAtrasado == undefined ? 0 : naoProcessadoAtrasado.length;
}
var myBarChart = new Chart(ctx, {
type: 'bar',
data: {
labels: datas,
datasets: [{
label: "Erro no processamento",
backgroundColor: colors["ERRO_PROCESSAMENTO"].hexa,
data: dataErro
}, {
label: "Arquivo processado atrasado",
backgroundColor: colors["PROCESSADA_ATRASADA"].hexa,
data: dataProcessadaAtrasada
}, {
label: "Arquivo processado sem atraso",
backgroundColor: colors["PROCESSADA"].hexa,
data: dataProcessada
}, {
label: "Arquivo não processado, atrasado",
backgroundColor: colors["NAO_PROCESSADA_ATRASADA"].hexa,
data: dataNaoProcessadaAtrasada
}, {
label: "Arquivo não processado, sem atraso",
backgroundColor: colors["NAO_PROCESSADA"].hexa,
data: dataNaoProcessada
}]
},
options: {
tooltips: {
mode: 'index'
},
scales: {
xAxes: [{
maxBarThickness: 100,
ticks: {
beginAtZero: true,
}
}],
yAxes: [{
stacked: true,
ticks: {
}
}]
},
maintainAspectRatio: false
}
})
});
}
写作barThickness: 100
工作,但这会将每个条设置为这个大小,无论条的数量如何(当有很多条时会导致问题)
编辑:我想我发现了问题的第一部分,这个选项似乎不适用于stacked: true
,但删除它(stacked: true
)不是一个选项,在这种情况下,对我来说
解决方案
答案很简单,我没有使用最新版本的 chart.js。在我将我的 html 上的导入行更改为<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
它工作得很好之后。
推荐阅读
- java - Apache POI Excel 图表在 Mac 上消失,但在 Windows/Linux 上没有
- agda - 如何在有前提的情况下制作 Adga 函数
- javascript - 未捕获的 ReferenceError:未在 HTMLInputElement.onchange 中定义 readURL
- java - LWJGL 3 正交相机实现导致闪烁的播放器实体
- java - Atomic 中的 Java 计算
- database - 设计 NoSQL 数据表
- python - 在这个流循环中,我应该在哪里放置 float() 或任何类型的字符串到数字函数?
- javascript - 如何使用 Plyr JS 在视频播放器中添加下载按钮?
- dns - (碘)将 dns0 流量路由到 eth0
- python - Keras:在 flow_from_directory() 中使用多个目录