Javascript 减少水平条形图中刻度之间的间距_Javascript_Html_Css_Angularjs_Chart.js

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

javascript html css angularjs chart.js

Javascript 减少水平条形图中刻度之间的间距,javascript,html,css,angularjs,chart.js,Javascript,Html,Css,Angularjs,Chart.js,我正在使用chartjs中的水平条形图。现在我的图表看起来非常大，X轴上刻度之间的距离非常高。（我附上了那张照片），有谁能告诉我如何缩小这个空间并更好地缩放图表我的css属性： #myChart { width: 90% !important; height: 100% !important; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; display: bloc

我正在使用chartjs中的水平条形图。现在我的图表看起来非常大，X轴上刻度之间的距离非常高。（我附上了那张照片），有谁能告诉我如何缩小这个空间并更好地缩放图表

我的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
        }
      }
    });

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

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

如果您发布了相应的HTML，那么我可以确认这一点，但是

#myChart

是您的

canvas

元素的id还是包含

canvas

元素的

div

的id

js将呈现图表，使其完全填充

画布

元素的父元素。即使在

canvas

元素上设置

width

属性，也不会影响图表大小

验证这一差异。顶部是一个包含

div

的图表，其宽度设置为40%。底部是同一个图表，但

画布

元素的宽度设置为40%。请注意，第二个图表仍然填充整个窗口

长话短说，您应该将

canvas

元素包装在

div

中，并相应地设置

div

的所需大小，以实际更改图表的大小

现在，让我来回答您关于更改X轴上刻度之间的间距的问题。实际上没有一种方法可以像我认为您希望的那样真正做到这一点，因为chart.js通过将图表的宽度除以刻度步数来确定刻度的位置（例如，它总是平等地使用图表的整个宽度）

因此，减少刻度间距的一种方法是简单地添加更多刻度（通过使用

stepSize

和

fixedStepSize

属性更改刻度步长）。显然，在这种情况下，图表大小没有改变。您只是显示了更多的记号，因此它们之间的间距减小了

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

MaintaintAspectratio

属性默认为

true

因此，如果您想要一个更窄的图表（但仍然希望图表更大），那么我建议您将

maintaintAspectratio

属性设置为

false

，并手动设置图表父级

div

的高度和宽度

这个例子给出了我所讨论的每个刻度间距概念的一个例子

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