![](/img/trans.png)
[英]How to align X-Axis ticks on vertical gridlines (Chart.js, Bar-Chart)
[英]Chart.js How to align x-ticks?
我有一些點是按時間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回答了這個問題:
刪除源:“標簽”並設置unitStepSize:0.5即可實現所需的功能。 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
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.