javascript - 有没有办法从 Chart.js 的条形图中删除多余的空间和水平线？

Question

我正在使用 Chart.js 的条形图，它在左侧和右侧创建了不需要的间距。我试图通过将 Canvas 宽度和高度设置为 100% 来删除它，如所述 chartjs-is-there-any-way-to-remove-blank-space-around-pie-charts这里。但就我而言，它并没有被删除。

我还需要删除图表下方的水平线。有什么办法可以做到吗？

这是我尝试过的:

    //Bar Chart
    var bar = document.getElementById("bar-canvas");
    var barChart = new Chart(bar, {
      type: 'bar',
      data: {
        labels: ["Jackets", "Pants", "Headwear", "Shirts", "Footwear"],
        datasets: [{
          label: 'Dataset 1',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF'
          ],
          borderColor: [
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF',
            '#A7E3FF'
          ],
          borderWidth: 1
        },
        {
          label: 'Dataset 2',
          data: [20, 19, 10, 52, 2, 13],
          backgroundColor: [
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE'
          ],
          borderColor: [
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE',
            '#FD99EE'
          ],
          borderWidth: 1
        }]
      },
      responsive: true,
      options: { 
        legend: {
          display: false
        },
        tooltips: {
          callbacks: {
            label: function(tooltipItem) {
              return tooltipItem.yLabel;
            }
          }
        },
        scales: {
          xAxes: [{
            stacked: true,
            gridLines: {
              color: "rgba(0, 0, 0, 0)"
            },
            ticks: {
              fontColor: '#0071bc'
            },
            barThickness: 110
          }],
          yAxes: [{
              stacked: true,
              gridLines: {
                color: "rgba(0, 0, 0, 0)"
              },
              scaleLabel: {
                display: false
              },
              ticks: {
                display: false
              }
            }
          ]
        }
      }
    });

<canvas id="bar-canvas"></canvas>

Answer 1

设法删除底线，但不知何故无法删除填充，-评论了一个区域，该区域删除了一点，但随后您丢失了刻度(这显然很糟糕)

只是添加一个 fiddle ，希望它至少能有所帮助!

https://jsfiddle.net/aokzss3c/1/

..xAxes..
ticks: {
    display: true, // removing this
    fontColor: '#0071bc',
},