Chart.js限制图表的显示大小

Question

我在ASP.NET项目中使用Chart.js。我有一个这样的条形图： 如您所见，对于某些酒吧，用户将无法看到他们的标签。我正在考虑使图表的显示尺寸更小，以便标签右侧有足够的空间。但是怎么做呢？

Answer 1

您可以通过为图表布局设置一些右边填充（根据需要）来实现此目的。

options: {
   layout: {
      padding: {
         right: 100 //set as you wish
      }
   },
   ...
}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇᴀᴍᴘʟᴇ

var chart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Statistics',
         data: [3, 1, 2, 5, 4],
         backgroundColor: 'rgba(0, 119, 204, 0.8)',
      }]
   },
   options: {
      layout: {
         padding: {
            right: 100 //set as you wish
         }
      },
      scales: {
         xAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>