Chart.js - 如何设置轴 min\max 和时间轴标签分隔的边距

Question

我有一个 Chart.js 2.9.4 图表，其中有

time

X 轴（显示日期）。我使用的示例代码：

var data = {
  datasets: [{
    label: "dataset1",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#43dea6',
    borderColor: '#43dea6',
    data: [{t:"2021-03-30T00:00:00",y:6},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:4},{t:"2021-04-12T00:00:00",y:7},{t:"2021-04-19T00:00:00",y:6},{t:"2021-04-26T00:00:00",y:8},{t:"2021-05-04T00:00:00",y:10},{t:"2021-05-11T00:00:00",y:10},{t:"2021-06-09T00:00:00",y:2},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:4}]
  },
  {
    label: "dataset2",
    lineTension: 0,  
    fill: false,  
    backgroundColor: '#e44269',
    borderColor: '#e44269',
    data: [{t:"2021-03-30T00:00:00",y:0},{t:"2021-04-01T00:00:00",y:3},{t:"2021-04-05T00:00:00",y:1},{t:"2021-04-12T00:00:00",y:1},{t:"2021-04-19T00:00:00",y:1},{t:"2021-04-26T00:00:00",y:0},{t:"2021-05-04T00:00:00",y:0},{t:"2021-05-11T00:00:00",y:0},{t:"2021-06-09T00:00:00",y:4},{t:"2021-06-16T00:00:00",y:3},{t:"2021-06-23T00:00:00",y:2}]
  }]
};

var options = {
    animation: false,    
    scales: {
        xAxes: [{
            type: 'time',
            time: {
                            unit: 'day',
                tooltipFormat: 'DD.MM.YYYY',
                displayFormats: {
                    day: 'DD.MM.YY'
                }
            }
        }]
    }
};

var ctx = document.getElementById("chart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

<div id="chartDiv"><canvas id="chart"></canvas></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.bundle.min.js"></script>

我需要三样东西：

1. 为轴最小\最大设置自动 5% 边距。我知道我可以自己计算最小\最大值，并通过

   ticks.min\ticks.max

   选项设置它们，但对于

   time

   X 轴来说，这并不是那么容易和明显。
2. 确保每个点在X轴上一定有对应的刻度和标签。
3. 设置自动 X 轴标签分隔（根据我的口味，Chart.js 将它们彼此拉得太近）。

许多图表库都有轴边距选项（以像素或轴全长的百分比为单位）、“点上的标签”和标签分隔选项（以像素或轴标签宽度的百分比为单位） - 也许 Chart.js 也有..

这是我现在拥有的：

这是我需要的：

P。 S. 如果其中一些功能只能在 Chart.js 3.x 中实现 - 没问题，我可以升级。

Answer 1

对于你的第一个问题，据我所知，没有其他解决方案可以自己计算，在 V3 中，他们添加了一个

grace

属性（docs）来执行此操作，但它仅适用于线性轴。

对于第二个问题，您可以使用刻度回调。您获取该值，然后您可以检查您的数据源是否有与之匹配的点，如果有，您再次返回它，如果没有，您可以返回一个空字符串。有关更多信息，请参阅此示例：https://www.chartjs.org/docs/master/samples/scale-options/ticks.html

对于第三个问题，您可以增加

autoSkipPadding

(docs)