繁体   English   中英

Chart.js maxBarThickness 选项不起作用

[英]Chart.js maxBarThickness option not working

我一直在尝试为条形设置一个阈值,因为当我只有一个条形时,它会变得非常大而且不可取。

这是我尝试设置条形大小限制的地方,但没有结果。

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>它工作得很好。

将 'maxBarTHinkness' 属性设置为数据集级别而不是选项。 数据集:[{label:'..', data:[],maxBarThickness:100 }]

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM