Question

在 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 %}

Answer 1

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

对于刻度，如果您将 autoSkip 设置为 true 而不是 false，chart.js 应该自动跳过标签，这样它们就不会重叠，然后您还可以告诉 chart.js 您希望它们之间有多少空间autoSkipPadding 属性参见下面的示例。如果你真的想显示所有标签，你别无选择，只能让图表在物理上更大，因为 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" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

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

1 个答案: