javascript - Chart.js 2.0 中水平条之间的奇怪线条

Question

Chart.js 中的水平条之间有一些奇怪的线条。即使我输入 barPercentage: 1, categoryPercentage: 1,。我还尝试了 [0.90, 1] 的所有组合。请帮忙!

这是我所拥有的

  new Chart(elem, {
    type: 'horizontalBar',
    data: {
      labels: data.map(i => REGIONS[i.region]),
      datasets: [{
        data: data.map(i => i[name]),
      }],
    },
    options: {
      legend: {
        display: false,
        labels: {
          padding: 20,
        }
      },
      scales: {
        xAxes: [{
          gridLines: {
            display: true,
            // lineWidth: 0,
            drawTicks: false,
            drawBorder: false,
            // zeroLineWidth: 1,
          },
        }],
        yAxes: [{
          barPercentage: .99, // I've also tried all from [0.90, 1]
          categoryPercentage: .98, // I've also tried all from [0.90, 1]
          ticks: {
            padding: 25,
          },
        }]
      },
    }
  });

Answer 1

所以我用一些示例数据尝试了你的代码，我得到了正确的结果，我正在使用最新的 Chart.js (版本2.7.0)当我设置 barPercentage 时它工作正常和 categoryPercentage 1，如果您仍然遇到此问题，

我这个答案的主要观点是!

The values barPercentage and the categoryPercentage can be increased above 1 so you can give 1.05 to resolve this problem.

这是一个 JSFiddle，其中包含我模拟的一些示例数据以显示解决方案。

JSFiddle Demo

请随意尝试这个解决方案，如果上述建议不起作用，请在我提供的 JSFiddle 中复制问题并再次向我展示该问题!