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元素或包含div元素的canvas的ID是canvas吗？

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

查看显示差异的codepen example。顶部是canvas包含的图表，其宽度设置为40％。底部是相同的图表，但canvas元素的宽度设置为40％。请注意，第二个图表仍然填满整个窗口。

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

现在，让我解决一下有关更改X轴上刻度线间距的问题。真的没有办法像我想的那样真正做到这一点，因为chart.js通过将图表的宽度除以刻度步数来确定刻度线的位置（例如，它总是使用整个宽度的图表同样）。

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

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

因此，如果您想要一个较窄的图表（但仍希望图表很大），那么我建议您将false属性设置为div并手动设置图表的高度和宽度＃39;父母{{1}}。

查看此codepen，其中给出了我讨论过的每个节拍间距概念的示例。

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

Answer 2

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

减少水平条形图jS中刻度之间的间距

2 个答案: