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

nsc4cvqm  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(143)

在下面的可运行代码片段中,条形图的x轴是type: 'time'data作为array的单个对象提供,每个对象具有xy属性。
问题是图表上只显示第一个和最后一个条形图的一半宽度。需要做些什么来解决这个问题?

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

4uqofj5v1#

虽然我不能告诉你为什么会发生这种情况,但是可以通过在fuelChart.options.scale.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>

相关问题