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，如果您仍然遇到此问题，

我在这个答案中的主要观点是！

值barPercentage和categoryPercentage可以是已增加到1以上，因此您可以1.05解决此问题。

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

JSFiddle Demo

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

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

1 个答案: