X轴为time类型的柱状图首尾柱子部分隐藏问题求解

在使用Chart.js绘制X轴类型为time的柱状图时，若数据为包含x（时间戳）和y属性的对象数组，会出现首尾两根柱子仅显示一半宽度的问题，以下是具体解决办法：

问题原因 #

该问题源于X轴的offset: true配置，结合时间轴刻度默认贴合数据首尾范围，导致首尾柱子的一半超出了图表可视区域。

解决方法 #

方法一：关闭X轴的offset属性 #

将X轴配置中的offset从true改为false，柱子会自动对齐刻度中心，首尾柱子即可完整显示：

const fuelChart = new Chart("chart", {
  "type": "bar",
  "data": {
    "datasets": [{
        "label": "Price",
        "data": [{
            "x": 1230764400000,
            "y": 1.795
          },          
          {
            "x": 1235862000000,
            "y": 1.96
          },
          {
            "id": "1000782",
            "x": 1238536800000,
            "y": 2.051
          },
          {
            "x": 1249077600000,
            "y": 2.62
          },         
          {
            "x": 1254348000000,
            "y": 2.557
          },
          {
            "id": "1000921",
            "x": 1257030000000,
            "y": 2.648
          },        
          {
            "x": 1262300400000,
            "y": 2.714
          },
          {
            "id": "1000981",
            "x": 1264978800000,
            "y": 2.651
          },       
          {
            "x": 1270072800000,
            "y": 2.855
          },       
          {
            "x": 1275343200000,
            "y": 2.727
          },
          {
            "x": 1277935200000,
            "y": 2.727
          },        
          {
            "x": 1283292000000,
            "y": 2.703
          }
        ],
        "backgroundColor": "rgba(78,121,167,0.75)",
        "borderColor": "rgba(78,121,167,1)",
        "borderWidth": 1
      }   
    ]
  },
  "options": {
    "scales": {    
      "x": {
        "offset": false, // 此处修改为false
        "type": "time",
        "time": {
          "unit": "day",
          "displayFormats": {
            "day": "d MMM yyyy"            
          },
          "tooltipFormat": "d MMM yyyy"
        }
      }
    }
  }
});

方法二：手动扩展X轴时间范围 #

如果需要保留offset: true，可以通过设置X轴的min和max属性，给首尾数据各额外留出一个单位的时间空间（比如一天的毫秒数86400000）：

const fuelChart = new Chart("chart", {
  "type": "bar",
  "data": {
    "datasets": [{
        "label": "Price",
        "data": [{
            "x": 1230764400000,
            "y": 1.795
          },          
          {
            "x": 1235862000000,
            "y": 1.96
          },
          {
            "id": "1000782",
            "x": 1238536800000,
            "y": 2.051
          },
          {
            "x": 1249077600000,
            "y": 2.62
          },         
          {
            "x": 1254348000000,
            "y": 2.557
          },
          {
            "id": "1000921",
            "x": 1257030000000,
            "y": 2.648
          },        
          {
            "x": 1262300400000,
            "y": 2.714
          },
          {
            "id": "1000981",
            "x": 1264978800000,
            "y": 2.651
          },       
          {
            "x": 1270072800000,
            "y": 2.855
          },       
          {
            "x": 1275343200000,
            "y": 2.727
          },
          {
            "x": 1277935200000,
            "y": 2.727
          },        
          {
            "x": 1283292000000,
            "y": 2.703
          }
        ],
        "backgroundColor": "rgba(78,121,167,0.75)",
        "borderColor": "rgba(78,121,167,1)",
        "borderWidth": 1
      }   
    ]
  },
  "options": {
    "scales": {    
      "x": {
        "offset": true,
        "type": "time",
        "min": 1230764400000 - 86400000, // 首数据时间戳减一天
        "max": 1283292000000 + 86400000, // 尾数据时间戳加一天
        "time": {
          "unit": "day",
          "displayFormats": {
            "day": "d MMM yyyy"            
          },
          "tooltipFormat": "d MMM yyyy"
        }
      }
    }
  }
});

HTML部分保持不变：

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

内容的提问来源于stack exchange，提问作者uminder