我正在使用Chart.js 4创建一个时间序列图表。目前，它看起来像这样：
，但我只希望每15秒标记一次x轴。因此，在这个例子中，将有3个滴答，分别在12：38：30、12：38：45和12：39。
我试过使用stepSize和count，但似乎都不起作用。
这是我的配置
const config = {
type: "line",
data: {
datasets: [{
label: "20070480",
borderColor: "#36A2EB",
backgroundColor: "#9BD0F5",
data: [
[1681792679186, 1096],
[1681792680186, 1147],
[1681792681187, 1056],
[1681792682187, 1100],
[1681792683188, 1104],
[1681792684188, 1158],
[1681792685188, "1124.6319921491659"],
[1681792686189, "1111.2244897959183"],
[1681792687189, 1055.937193326791],
[1681792688189, 1126.530612244898],
[1681792689190, 1083.415112855741],
[1681792690190, 1160],
[1681792691190, "1068.3673469387754"],
[1681792692191, "1094.2100098135427"],
[1681792693191, 1159],
[1681792694191, 1092],
[1681792695192, 1115],
[1681792696192, 1083],
[1681792697192, 1146],
[1681792698193, 1105],
[1681792699193, 1085],
[1681792700193, 1133],
[1681792701194, 1101],
[1681792702194, 1107],
[1681792703195, 1074],
[1681792704195, 1094],
[1681792705195, 1126],
[1681792706196, 1101],
[1681792707196, 1065],
[1681792708196, 1108],
[1681792709197, 1125],
[1681792710197, 1059],
[1681792711198, 1186],
[1681792712198, 1087],
[1681792713198, 1117],
[1681792714199, 1062],
[1681792715199, 1118],
[1681792716199, 1172],
[1681792717200, 1148],
[1681792718200, 1106],
[1681792719201, 1061],
[1681792720201, 1139],
[1681792721201, 1114],
[1681792722202, 1117],
[1681792723202, 1123],
[1681792724202, 1119],
[1681792725203, 1119],
[1681792726203, 1175],
[1681792727204, 1089],
[1681792728204, 1132],
[1681792729204, "1130.5201177625124"],
[1681792730205, "1161.2244897959183"],
[1681792731205, 1085],
[1681792732205, "1133.4641805691856"],
[1681792733206, 1139],
[1681792734206, 1147],
[1681792735207, 1109],
[1681792736207, "1152.0408163265306"],
[1681792737207, "1087.3405299313054"],
[1681792738208, 1145],
[1681792739208, 1163],
[1681792740208, 1061],
[1681792741209, "1151.0204081632653"],
[1681792742209, "1076.5456329735036"],
[1681792743209, 1048],
[1681792744210, 1117],
[1681792745210, 1105],
[1681792746210, 1103],
[1681792747211, 1122],
[1681792748211, 1105],
[1681792749212, 1095],
[1681792750212, 1141],
[1681792751212, 1138],
[1681792752212, 1160],
[1681792753213, 1106],
[1681792754213, 1077],
[1681792755213, 1087],
[1681792756214, 1138],
[1681792757214, 1103],
[1681792758215, 1114],
[1681792759215, 1130],
[1681792760215, 1128],
[1681792761216, 1100],
[1681792762216, 1068],
[1681792763216, 1143],
[1681792764217, 1142],
[1681792765217, 1118],
[1681792766218, 1089],
[1681792767218, 1122],
[1681792768218, 1122],
[1681792769218, 1080],
[1681792770219, 1182],
[1681792771219, 1162],
[1681792772220, 1100],
[1681792773220, 1181],
[1681792774220, 1103],
[1681792775221, 1116],
[1681792776221, 1095],
[1681792777221, "1047.0588235294117"],
[1681792778222, "1166.4964249233913"],
[1681792779222, "1087.2549019607843"],
[1681792780223, 1125],
[1681792781223, 1060],
[1681792782223, 1111],
[1681792783224, 1057],
[1681792784224, 1074],
[1681792785224, "1141.9816138917263"],
[1681792786225, 1104],
[1681792787225, "1112.7450980392157"],
[1681792788226, 1148],
[1681792789226, 1146],
[1681792790226, 1098],
[1681792791227, 1164],
[1681792792227, 1120],
[1681792793227, 1144],
[1681792794228, 1133],
[1681792795228, 1163],
[1681792796229, 1101],
[1681792797229, 1108],
[1681792798229, 1105]
]
}]
},
options: {
animation: false,
scales: {
x: {
title: {
display: true,
text: "Time (UTC)",
font: {
size: 30,
weight: "bold"
}
},
type: "time",
ticks: {
font: {
size: 20,
weight: "bold"
},
minRotation: 45,
count: 3,
// stepSize: 15000,
// autoSkip: false
},
min: 1681792710000,
max: 1681792740000
},
y: {
title: {
display: true,
text: "Count Rate",
font: {
size: 30,
weight: "bold"
}
},
ticks: {
font: {
size: 15
}
}
}
}
}
};P.S.我还没有用Chart.js 4.x创建一个Codepen或JsFiddle，但是你可以使用这个Playground，https://www.chartjs.org/docs/latest/samples/line/line.html并将我的配置粘贴到那里
1条答案
按热度按时间0dxa2lsx1#
TLDR -使用
stepSize: 15;时间轴使用unit的概念，可以由用户指定为options.time.unit，请参阅文档。如果未指定，则根据数据计算单位;在你的例子中，它是“秒”，但是如果你正在使用它，最好显式地设置它-你确实是，因为stepSize是以units而不是毫秒计算的。这把小提琴也一样
现在，单位与刻度线的四舍五入方式相关。在上面的代码中，我将变量
unit: "millisecond"放在注解下;你可以使用它，然后你必须设置stepSize: 15000来获得三个刻度，但是文本将是7:38:30.000。所以，我想这就是
chart.js的作者找到的解决方案，通过将1 ms的硬JavaScript时间单位替换为更抽象的单位，为用户提供更多的控制，从而为所有与时间相关的事情给予一致的方法。* 注意 *：不要尝试unit: "minute"和stepSize: 0.25-它会进入一个讨厌的无限循环：）您为不同单位设置不同报价格式的变体可以被视为“预防性”：不要显式地设置
unit，让代码从数据中选择最佳的一个，如果它碰巧是second，则使用此格式，如果它碰巧是minute，则使用另一个，等等。对于来自外部源的动态数据，这也是有意义的，因此程序员可能事先不知道适当的单位是什么。