第一个和最后一个柱形部分隐藏在条形图上，x 轴类型为“时间”

Question

下面的可运行代码片段中我的条形图的 x 轴是

type: 'time'

。

data

作为单个对象的

array

提供，每个对象都有

x

和

y

属性。

问题是图表上仅显示第一个和最后一个柱的一半宽度。需要做什么来解决这个问题？

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",
        "time": {
          "unit": "day",
          "displayFormats": {
            "day": "d MMM yyyy"            
          },
          "tooltipFormat": "d MMM yyyy"
        }
      }
    }
  }
});

<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>

Answer 1

虽然我无法告诉你为什么会发生这种情况，但可以通过在fuelChart.options.scales.x中设置x轴的最小值和最大值来修复它

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": {
        "min": 1230764400000,
        "max": 1283303000000,
        "offset": true,
        "type": "time",
        "time": {
          "unit": "day",
          "displayFormats": {
            "day": "d MMM yyyy"            
          },
          "tooltipFormat": "d MMM yyyy"
        }
      }
    }
  }
});

function minMax(){
  fuelChart.options.scales.x.min = fuelChart.data.datasets[0].data[0].x-1000000000;
  fuelChart.options.scales.x.max = fuelChart.data.datasets[0].data[fuelChart.data.datasets[0].data.length-1].x+1000000000
  fuelChart.update()
}

function resetMinMax(){
  fuelChart.options.scales.x.min = fuelChart.data.datasets[0].data[0].x
  fuelChart.options.scales.x.max = fuelChart.data.datasets[0].data[fuelChart.data.datasets[0].data.length-1].x
  fuelChart.update()
    
}

<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>

<button onclick=minMax()>Edit Min & Max</button>
<button onclick=resetMinMax()> Reset Min & Max </bbtton>