time - ChartJS：如何将刻度线上的月线图左对齐以与日线图保持一致？

Question

我试图在同一张图表上显示每天的用户总数（用一条线）和每天、每周和每月的活跃用户数（不同宽度的重叠条）。

它主要工作，但我的每周和每月数据集中在一周/月的第一天，当我需要它们保持对齐时。我试图遵循这个答案，但还没有成功……</p>

而且我不知道如何调整条形宽度以覆盖整个周/月

这是一个可以玩的小提琴： https ://jsfiddle.net/DomitienAW/12rot7ae/9/

new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['2021-02-16','2021-02-17','2021-02-18','2021-02-19','2021-02-20','2021-02-21','2021-02-22','2021-02-23','2021-02-24','2021-02-25','2021-02-26','2021-02-27','2021-02-28','2021-03-01','2021-03-02','2021-03-03','2021-03-04','2021-03-05','2021-03-06','2021-03-07','2021-03-08','2021-03-09','2021-03-10','2021-03-11','2021-03-12'],
      datasets: [
        {
          label:"#user",
          data:[{t:'2021-02-16',y:50},{t:'2021-02-17',y:51},{t:'2021-02-18',y:51},{t:'2021-02-19',y:52},{t:'2021-02-20',y:52},{t:'2021-02-21',y:52},{t:'2021-02-22',y:52},{t:'2021-02-23',y:54},{t:'2021-02-24',y:55},{t:'2021-02-25',y:55},{t:'2021-02-26',y:55},{t:'2021-02-27',y:55},{t:'2021-02-28',y:55},{t:'2021-03-01',y:56},{t:'2021-03-02',y:58},{t:'2021-03-03',y:58},{t:'2021-03-04',y:58},{t:'2021-03-05',y:58},{t:'2021-03-06',y:58},{t:'2021-03-07',y:59},{t:'2021-03-08',y:59},{t:'2021-03-09',y:59},{t:'2021-03-10',y:59},{t:'2021-03-11',y:60},{t:'2021-03-12',y:60}],
          borderColor:'rgba(3, 169, 244, 0.75)',
          borderWidth:2,
          pointRadius:0,
          fill:false,
          xAxisID: "day",
        },
        {
          label:"unique daily active member",
          data:[{t:'2021-02-16',y:1},{t:'2021-02-17',y:1},{t:'2021-02-18',y:0},{t:'2021-02-19',y:2},{t:'2021-02-20',y:2},{t:'2021-02-21',y:0},{t:'2021-02-22',y:5},{t:'2021-02-23',y:4},{t:'2021-02-24',y:0},{t:'2021-02-25',y:2},{t:'2021-02-26',y:1},{t:'2021-02-27',y:5},{t:'2021-02-28',y:3},{t:'2021-03-01',y:2},{t:'2021-03-02',y:1},{t:'2021-03-03',y:2},{t:'2021-03-04',y:0},{t:'2021-03-05',y:5},{t:'2021-03-06',y:4},{t:'2021-03-07',y:3},{t:'2021-03-08',y:5},{t:'2021-03-09',y:5},{t:'2021-03-10',y:4},{t:'2021-03-11',y:6},{t:'2021-03-12',y:0}],
          backgroundColor:'rgba(3, 169, 244, 0.75)',
          type:'bar',
          xAxisID: "day",
        },
        {
          label:"unique weekly active member",
          data:[{t:'2021-02-16',y:9},{t:'2021-02-22',y:7},{t:'2021-03-01',y:12},{t:'2021-03-08',y:11}],
          backgroundColor:'rgba(3, 169, 244, 0.40)',
          type:'bar',
          xAxisID: "week",
          barPercentage:1.25,
        },
        {
          label:"unique monthly active member",
          data:[{t:'2021-02-16',y:18},{t:'2021-03-01',y:21}],
          backgroundColor:'rgba(3, 169, 244, 0.15)',
          type:'bar',
          xAxisID: "month",
          barPercentage:1.25,
        },
      ],
    },
    options:{
      scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true,
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          }],
          xAxes: [{
            id:"day",
            gridLines: {
              display:false,
            },
            type: 'time',
            time: {
              unit: "day",
              displayFormats: {
                day: "DD",
                },
              },
            distribution: 'linear',
            ticks:{
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          },{
            id:"week",
            gridLines: {
              display:false,
            },
            type: 'time',
            time: {
              unit: "week",
              displayFormats: {
                week: "MMM DD",
                },
              },
            distribution: 'linear',
            ticks:{
              display:false,
            },
          },{
            id:"month",
            gridLines: {
              display:true,
            },
            type: 'time',
            time: {
              unit: "month",
              displayFormats: {
                month: "MMMM",
                },
              },
            distribution: 'linear',
            ticks:{
              fontColor:'#78909c',
              fontFamily:"'Source Sans Pro', sans-serif",
              fontSize:10,
            },
          }]
      },
      legend: {
        display: false,
      },
      tooltips: {
        backgroundColor:'rgba(3, 169, 244, 0.75)',
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        titleFontStyle:"normal",
        bodyFontFamily:"'Source Sans Pro', sans-serif",
        displayColors: false,
        cornerRadius:0,
        intersect:false,
        callbacks: {
            title: function(tooltipItem){
                return this._data.labels[tooltipItem[0].index];
              }
          },
      },
    },
});

非常感谢你的帮助

标签： timechart.jsbar-chartaxesmultiple-axes