减少水平条形图chartJS中刻度之间的空间

Question

我正在使用来自 chartjs 的水平条形图。现在我的图表似乎很大，xAxis 上的刻度之间的空间很大。 （我附上了图片），谁能告诉我如何缩小这个空间并更好地缩放图表？

我的 CSS 属性：

#myChart {
  width: 90% !important;
  height: 100% !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
  display: block;
  padding-bottom: 5%;
}

我的图表选项：

modelChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: data,
      options: {
        scales: {
          yAxes: [{
            ticks: {
              suggestedMin: 0,
              fontSize: 18
            }
          }],
          xAxes: [{
            ticks: {
              autoSkip: false,
              fontSize: 18,
              beginAtZero: true
            }
          }]
        },
        legend: {
          display: false
        },
        tooltips: {
          footerFontSize: 22,
          bodyFontSize: 22,
          titleFontSize: 18
        },
        hover: {
          animationDuration: 0
        }
      }
    });

Answer 1

如果您发布相应的 HTML，那么我可以确认这一点，但 #myChart 是您的 canvas 元素的 ID 还是包含您的 canvas 元素的 div 的 ID？

Chart.js 将呈现图表，使其完全填充canvas 元素的父元素。即使您在 canvas 元素上设置了 width 属性，它仍然不会影响图表大小。

查看此codepen example，它展示了不同之处。顶部是由 div 包含的图表，其宽度设置为 40%。底部是同一张图表，但 canvas 元素的宽度设置为 40%。请注意，第二个图表仍会填满整个窗口。

长话短说，您应该将canvas 元素包装在div 中，并相应地设置div 所需的大小以实际更改图表的大小。

现在，让我来解决您有关更改 X 轴刻度之间间距的问题。没有真正的方法可以像我认为您想要的那样真正做到这一点，因为 chart.js 通过将图表的宽度除以刻度步数来确定刻度位置（例如，它始终使用图表同样）。

因此，减少刻度之间空间的一种方法是简单地添加更多刻度（通过使用stepSize 和fixedStepSize 属性更改刻度步长）。显然，在这种情况下，图表大小没有改变。您只是显示了更多的刻度，因此它们之间的空间减小了。

如果你想真正改变刻度之间的距离，那么唯一的方法就是减小图表的宽度。但默认情况下，图表的高度会随着宽度的增加而减小，因为maintainAspectRatio 属性默认为true。

因此，如果您想要更窄的图表（但仍希望图表更大），那么我建议您将maintainAspectRatio 属性设置为false 并手动设置图表父级div 的高度和宽度.

查看此codepen，它提供了我讨论的每个刻度间距概念的示例。

第一个图表是基线，第二个图表添加了更多刻度（从而减小刻度间距），第三个图表更改了纵横比，因此图表仍然较大但较窄（因此刻度之间的距离减小了）。

Answer 2

尝试使用 chartArea: {width: '30%'}。根据需要调整百分比。它将压缩图表的宽度。只是一个想法 ！！！！我在水平条形图中使用来调整我的图形大小。