ChartJS 标签沿边缘

Question

是否可以按比例分配 X 标签，并且必须将它们放在最左边和最右边？

scales: {
    xAxes: {
      grid: { display: false },
      ticks: { autoSkip: true, maxTicksLimit: 5, maxRotation: 0, minRotation: 0 },
    },

 scales: {
    xAxes: {
      grid: { display: false },
      ticks: { autoSkip: true, maxTicksLimit: 5, maxRotation: 0, minRotation: 0 },
      type: 'time',
      time: {
        unit: 'month',
      },
    },

Answer 1

您可以使用 axes 回调 设置不常见/未涵盖的属性，但这样做您会放弃秤代码中内置的一些服务和保护。特别是，如果图表是静态的并且您确定刻度标签永远不会重叠，则可以使用

afterBuildTicks

回调来设置时间刻度的刻度位置 - 在 unix 中，刻度的位置是其

value

属性时间戳。

这是一个例子：

const d0 = new Date('2021-09-01').valueOf(),
    d1 = new Date('2023-09-10').valueOf(),
    N = 100;

const labels1 = Array.from({length: N}, (_, i) => {
    return d0 + (d1-d0)/(N-1)*i;
});
const data = {
    labels: labels1,
    datasets: [
        {
            label: 'Bars',
            data: Array.from({length: N}, (_, i) => Math.random() < 0.4 && i !== 0 && i !== N-1 ? 0 : 5 + Math.random() * 10),
            backgroundColor: 'rgba(128, 196, 32, 0.85)',
        },
        {
            label: 'Line',
            type: 'line',
            data: Array.from({length: N}, (_, i) => 5 + i/N * 10 + Math.random() / 2),
            fill: true,
            pointRadius: 0,
            backgroundColor: 'rgba(196, 196, 196, 0.5)',
        }
    ]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        responsive: true,
        scales:{
            x:{
                type: 'time',
                grid: { display: false },
                time:{
                    unit: "day",
                    displayFormats: {
                        day: 'MMM yyyy'
                    }
                },
                  ticks: {autoSkip: true, maxTicksLimit: 5, //stepSize: (d1-d0)/4/3600/1000/24,
                    maxRotation: 0, minRotation: 0
                },
                min: d0 - 5*24*36e5, // add a margin of 5 days to make sure the data fits
                max: d1 + 5*24*36e5,

                afterBuildTicks(scale){
                    const nTicks = scale.options.ticks.maxTicksLimit ?? 10;
                    scale.ticks = Array.from({length: nTicks}, (_, i)=>({value: (d1-d0)/(nTicks-1)*i+d0}));
                }
            },
            y:{
                display: false
            }
        },
        plugins: {
            legend: {
                display: false
            },
            title: {
                display: true,
                text: ''
            }
        }
    },
};

new Chart('chart1', config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdn.jsdelivr.net/npm/luxon@^3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@^1"></script>

  <div style="min-height: 60vh">
    <canvas id="chart1">
    </canvas>
  </div>