如何在Chartjs中的x时间轴上显示线性日刻度

ff29svar  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(187)

我有一个数据集宽度随机时刻,我想在x轴上显示舍入日期,如

|   |   |   |   |
12  13  14  15  16
oct oct oct oct oct

看起来time.round是正确的选项,但它不起作用,我的代码

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: chart_labels,
        datasets: [{
            label: 'Время доступа',
            data: chart_values,
            borderColor: ["#03A9F5"],
            borderWidth: 1,
            fill: true,
            backgroundColor: "#03A9F522",
            pointRadius: 1,         
            pointHoverRadius: 5,            
        }]
    },
  options: {
    interaction: {
      intersect: false,
      mode: 'index',
    },    
    tension: 0.4,
    scales: {
      x: {
        type: 'time',
        'time.round': 'day',
      },
      y: {
        title: {
          display: true,
          stacked: true,
          text: 'Секунды',
          beginAtZero: true
        }
      }
    },
  }
});

滴答声持续3小时:五点八点十一点......

已编辑
**时间:{回合:'day'}**不是正确的参数,当我需要将点保持在原位,但在日的开始绘制刻度时,它会将点移动到日的开始。https://jsfiddle.net/7y2L9ueq/

kognpnkq

kognpnkq1#

我认为问题是你在时间中使用了round选项。对于你所需要的,你应该使用unit选项,它定义了轴上的时间单位。

scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day' // <-- to use
        }
      },
      y: {
        title: {
          display: true,
          stacked: true,
          text: 'Секунды',
          beginAtZero: true
        }
      }
    }

相关问题