Chart.JS - 无法在 Y 轴标签之间添加边距/间距

Posted 2023-02-24

【中文标题】Chart.JS - 无法在 Y 轴标签之间添加边距/间距

【英文标题】：Chart.JS - Couldn't add the margin/spacing between Y-axis labels

【发布时间】：2021-09-06 03:43:51

【问题描述】：

在 Y 轴标签上应用边距的任何方式。就像我在 Y 轴上的流派名称一样，需要在它们之间添加更多的空间/边距才能看得清楚。 我几乎尝试了他们提供的所有选项，但都没有得到想要的结果。 参考：https://www.chartjs.org/docs/latest/axes/ 我找不到任何东西边距是 Y 轴上的字符串值。

% extends "admin/base_site.html" %

% block sidebar %
    block.super
    <div>
        <h3>All Genres Clips</h3>
        <a href="/admin/extra/">Click Here</a>
    </div>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css" />
<style>
#scrollContainer
  height: 300px;
  overflow-y: auto;


#chartContainer
  height: 600px;
  width: 500px;
  position: relative;


</style>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script type="text/javascript">

data =  data|safe ;
console.log(data.labels);

document.addEventListener('DOMContentLoaded', async() => 
const ctx = document.getElementById('myChart').getContext('2d');

var randomColorGenerator = function () 
    return '#' + (Math.random().toString(16) + '0000000').slice(2, 8);
;

  // Render the chart
  const chart = new Chart(ctx, 
    type: 'horizontalBar',
    data:
    
        labels: data.labels,
        datasets: [
         backgroundColor: randomColorGenerator(),
         barPercentage: 0.5,
         barThickness: 1,
         borderWidth: 1,
         //backgroundColor: 'blue',
         data: data.data,
      ]
   ,
   options: 
      tooltips: 
         mode: 'index',
         intersect: false
      ,
      hover: 
         mode: 'index',
         intersect: false
      ,
      maintainAspectRatio: false,
      responsive: true,
      legend: 
         display: false,
         position: 'bottom',
      ,
      title: 
        display: true,
        text: 'Genre Bar Chart'
        ,
      scales: 
         yAxes: [
           gridLines: 
             tickMarkLength: 10,
             display: true,
             drawTicks: true,
             drawOnChartArea: false,
           ,
           ticks: 
             fontColor: '#555759',
             fontFamily: 'Lato',
             fontSize: 15,
             autoSkip: false,
             backdropPadding: 500,

           ,
        scaleLabel: 
              display: true,
              padding: 5,
              fontFamily: 'Lato',
              fontColor: '#555759',
              fontSize: 10,
              fontStyle: 700,
              labelString: 'Genres'
            ,
         ],
         xAxes: [
             gridLines: 
               display: true,
                drawBorder: true,
                lineWidth: 1
             ,
           ticks: 
             beginAtZero: true,
             fontColor: '#555759',
             fontFamily: 'Lato',
             fontSize: 10,
           ,
            scaleLabel: 
              display: true,
              padding: 5,
              fontFamily: 'Lato',
              fontColor: '#555759',
              fontSize: 10,
              fontStyle: 700,
              labelString: 'Count'
            ,

         ]
      
   
);
);
</script>
% endblock %

% block content %
<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart"></canvas>
  </div>
</div>
<!-- Render the rest of the ChangeList view -->
 block.super 
% endblock %

【参考方案1】：

两件事，您使用的是 chart.js 的 v2，并且您链接的文档适用于 V3，对于 v2 文档，您必须像这样指定特定版本：https://www.chartjs.org/docs/2.9.4/

对于刻度，如果您将 autoSkip 设置为 true 而不是 false，chart.js 应该自动跳过标签以便它们不会重叠，然后您还可以告诉 chart.js 您希望它们之间有多少空间 @987654323 @property 请参见下面的示例。如果您真的想显示所有标签，除了让图表在物理上更大之外别无选择，因为 chart.js 需要更多垂直空间，请正确显示所有标签

带有额外填充的跳过示例：

var options = 
  type: 'line',
  data: 
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
      borderWidth: 1
    ]
  ,
  options: 
    scales: 
      xAxes: [
        ticks: 
          autoSkipPadding: 100
        
      ]
    
  


var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer"  ></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>