调整日期 ChartJS 的 X 轴标签

Question

我有下面一段js：

var canvas_link = document.getElementById("chart1").getContext("2d");

  var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      labels: xvalues,

      datasets: [{
        label: area_option,
        data: data,
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   

  
  })

这段代码输出如下图：[![enter image description here][1]][1]

下面的标签非常拥挤，我只想在 x 轴上有一个季度范围。标签当前为字符串格式。任何建议都将不胜感激，因为我很难理解文档。我试图删除标签数组中的一些值，但这只会导致无序的空白。谢谢！

Answer 1

有一种特殊类型的轴 - time，它可以用来自动缩放 X 轴标签。

时间刻度用于显示时间和日期。

在构建它的刻度时，它会根据刻度的大小自动计算最舒适的单位。

labels 选项不是必需的，data 应重新整形为 { x: new Date('2020-12-01'), y: 123 } 的数组。

const data = [
        { x: new Date('2020-12-01'), y: 123 },
        { x: new Date('2020-12-02'), y: 134 },
        { x: new Date('2020-12-03'), y: 154 },
        // etc.
],

X轴也需要配置为使用time类型（好像不会自动检测到）

var myChart = new Chart(canvas_link, {
    
    type: 'bar',
    data: {
      
      // labels: xvalues, (not needed)

      datasets: [{
        label: area_option,
        data: data, // note: should be new data not the old one
        backgroundColor: 'rgba(255, 99, 132, 1)',
      }]
    },
   
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
  
  })

你可以找到我的代码here。

已更新：X 轴仅显示季度/月。

添加unit: 'quarter'或unit: 'month'可以按季度或月份对X轴标签进行分组。

其他支持的单位可以在docs找到。

更新版本可以找到here

var myChart = new Chart(canvas_link, {

    type: 'bar',
    data: {
        datasets: [{
            data: data,
            label: 'Data',
            backgroundColor: 'rgba(255, 99, 132, 1)',
        }]
    },

    options: {
        scales: {
            xAxes: [{
                type: 'time',
                display: true,
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                },
                time: {
                    unit: 'quarter',
                },
                ticks: {
                    major: {
                        fontStyle: 'bold',
                        fontColor: '#FF0000'
                    }
                }
            }],
        }
    }
})