我有许多按时间 x 轴随机分布的点,并且我只想在 XX:00 这样的时间绘制刻度线,从而保留为每个点显示单独工具提示的可能性。是否可以?
需要时立即提供示例代码.. https://codepen.io/zzmaster/pen/YYmMmX
var data = {
labels: ["2012-02-02 12:03:11", "2012-02-02 12:12:11", "2012-02-02 13:10:11", "2012-02-02 14:22:11"],
datasets: [
{
label: "My First dataset",
type: 'line',
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81]
},
]
};
var options = {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
unitStepSize: 1,
displayFormats: {
'hour': 'HH:mm'
},
},
ticks:{
source: 'labels',
maxTicksLimit: 20,
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Loading'
},
}],
},
};;
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
最佳答案
GitHub 用户 etimberg 回答了这个问题:
removing source: 'labels' and setting unitStepSize: 0.5 achieves what you're looking for. https://codepen.io/anon/pen/ZrQjXr
var data = {
labels: ["2012-02-02 12:03:11", "2012-02-02 12:12:11", "2012-02-02 13:10:11", "2012-02-02 14:22:11"],
datasets: [
{
label: "My First dataset",
type: 'line',
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81]
},
]
};
var options = {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'hour',
unitStepSize: 0.5,
displayFormats: {
'hour': 'HH:mm'
},
},
ticks:{
maxTicksLimit: 20,
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Loading'
},
}],
},
};;
var ctx = document.getElementById("myChart").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
options: options,
data: data
})
关于javascript - Chart.js 如何对齐 x 刻度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48456854/