在下面的可运行代码片段中,条形图的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>
1条答案
按热度按时间4uqofj5v1#
虽然我不能告诉你为什么会发生这种情况,但是可以通过在fuelChart.options.scale.x中为x轴设置最小值和最大值来解决