时间戳

首页 > 解决方案 > Chart.js 2.9.4 - 如何为轴 min\max 和时间轴标签分隔设置边距

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

问题描述

我有一个带有X 轴（显示日期）的Chart.js 2.9.4图表。time我使用的示例代码：

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. 为轴 min\max设置自动5% 的边距。我知道我可以自己计算最小值\最大值并通过ticks.min\ticks.max选项设置它们，但是对于timeX 轴来说并不那么容易和明显。
  2. 确保每个点在 X 轴上肯定有相应的刻度和标签。
  3. 设置自动X 轴标签分隔（我的口味 Chart.js 将它们拉得太近）。

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

这是我现在所拥有的： 这是我需要的：这是我现在所拥有的 这是我需要的

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

标签： javascriptchart.js

解决方案

对于您的第一个问题 afaik，没有其他解决方案可以自己计算，在 V3 中，他们添加了一个grace属性（docs）来执行此操作，但它仅适用于线性轴。

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

对于您的第三个问题，您可以增加autoSkipPadding（文档）

推荐阅读