Javascript 删除chart.js chart中的空白

我有一个标准的水平堆叠图，但图和图例之间似乎有一个很大的差距（由下面的红色大圆圈表示）

我看过很多配置选项，但我找不到它来自哪里

$(function(){
myBarChart = new Chart($("#myChart"), {
        type: 'horizontalBar',
        data: {
            labels: ["Actions"],
            datasets: [{
                label: 'Closed : 50 (65%)',
                data: [50],
                backgroundColor: [
                    'rgba(255, 0, 0, 0.5)'
                ],
                borderColor: [
                    'rgba(255, 0, 0, 1)'
                ],
                borderWidth: 1
            }, {
                label: 'Delayed : 20 (12%)',
                data: [20],
                backgroundColor: [
                    'rgba(0, 0, 255, 0.5)'
                ],
                borderColor: [
                    'rgba(0, 0, 255, 1)'
                ],
                borderWidth: 1
            },
            {
                label: 'Open : 12 (5%)',
                data: [12],
                backgroundColor: [
                    'rgba(0, 255, 0, 0.5)'
                ],
                borderColor: [
                    'rgba(0, 255, 0, 1)'
                ],
                borderWidth: 1
            }
            ]
        },
        options: {

            //tooltips: { enabled: false },
            maintainAspectRatio: false,
            responsive: true,
            legend: {
                position: "right"
            },
            scales: {

                xAxes: [{
                    max: 82,

                    display: false,
                    gridLines: {
                        display: false
                    },
                    stacked: true
                }],
                yAxes: [{
                    max: 82,
                    display: false,
                    gridLines: {
                        display: false,
                    },
                    stacked: true,
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
    });

编辑：Woopsie，我忘了添加我做的小提琴：

我尝试了不同的方法，但我不能解决它。你能改变你的数据吗？如果你的数据总数等于100，我认为没有问题

 data: {
  labels: ["Actions"],
  datasets: [{
    label: 'Closed : 50 (65%)',
    data: [50],
    backgroundColor: [
      'rgba(255, 0, 0, 0.5)'
    ],
    borderColor: [
      'rgba(255, 0, 0, 1)'
    ],
    borderWidth: 1
  }, {
    label: 'Delayed : 20 (12%)',
    data: [20],
    backgroundColor: [
      'rgba(0, 0, 255, 0.5)'
    ],
    borderColor: [
      'rgba(0, 0, 255, 1)'
    ],
    borderWidth: 1
  }, {
    label: 'Open : 12 (5%)',
    data: [30],
    backgroundColor: [
      'rgba(0, 255, 0, 0.5)'
    ],
    borderColor: [
      'rgba(0, 255, 0, 1)'
    ],
    borderWidth: 1
  }]
},

我创建了一个函数签出。您不再需要更改值

  var total = 0;
  var value = 0;
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    total += myBarChart.data.datasets[i].data[0]
  }
  value = (100 - total) / myBarChart.data.datasets.length
  for (var i = 0; i < myBarChart.data.datasets.length; i++) {
    myBarChart.data.datasets[i].data[0] += value;
  }
  myBarChart.update();

var总计=0；
var值=0；
对于（var i=0；i

使用

而不是

xAxes: [{
    max: 82,
    ...
}]

$（函数（）{
myBarChart=新图表（$（“#myChart”）{
键入：“水平线”，
数据：{
标签：[“操作”]，
数据集：[{
标签:"封闭:50(65%)",，
数据：[50]，
背景颜色：[
'rgba（255,0,0,0.5）'
],
边框颜色：[
'rgba（255,0,0,1）'
],
边框宽度：1
}, {
标签：“延迟：20（12%）”，
数据：[20]，
背景颜色：[
'rgba（0,0,255,0.5）'
],
边框颜色：[
'rgba（0,0,255,1）'
],
边框宽度：1
},
{
标签:"未平仓:12(5%)",，
数据：[12]，
背景颜色：[
'rgba（0,255,0,0.5）'
],
边框颜色：[
'rgba（0，255，0，1）'
],
边框宽度：1
}
]
},
选项：{
//工具提示：{enabled:false}，
MaintaintAspectRatio:false，
回答：是的，
图例：{
位置：“右”
},
比例：{
xAxes：[{
刻度：{max:82}，
显示：假，
网格线：{
显示：假
},
是的
}],
雅克斯：[{
最高：82，
显示：假，
网格线：{
显示：假，
},
对,，
滴答声：{
贝吉纳泽罗：是的
}
}]
}
}
});
});

您可以添加代码吗？我用它解决了这个问题。您应该更新x轴最大值。如果你分享你的代码，我可以做更多的帮助，我已经准备好了小提琴，但完全忘记了链接它，我的坏！我可能会尝试这个，但我将不得不摆弄lengend和tooltip文本呈现函数来获取未调整的值。你能检查一下吗？也许这次效果更好
xAxes: [{
    max: 82,
    ...
}]