删除chart.js图表​​中的空白区域

Question

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

我已经查看了许多配置选项，但我无法找到它来自哪里

$(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，我忘了添加我制作的小提琴：

http://jsfiddle.net/uLUAT/1165/

Answer 1

使用

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

而不是

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

＆＃13;

＆＃13;

$(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: [{
                        ticks: { max: 82 },

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

＆＃13;

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
<div style="border:1px solid black">
<canvas id="myChart" height="100"></canvas>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

http://jsfiddle.net/uLUAT/1166/ 我尝试了不同的东西，但我无法解决它。你能改变你的数据吗？如果您的数据总数等于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
  }]
},

http://jsfiddle.net/uLUAT/1167/我创建了一个功能检出。你不需要再改变价值了。

  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();