[英]How to create two x-axes label using chart.js
這個問題已經回答了在github這里
這是一個有效的JSFiddle
var ctx = $("#c"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"], datasets: [{ label: '# of Votes', xAxisID:'xAxis1', data: [12, 19, 3, 5, 2, 3] }] }, options:{ scales:{ xAxes:[ { id:'xAxis1', type:"category", ticks:{ callback:function(label){ var month = label.split(";")[0]; var year = label.split(";")[1]; return month; } } }, { id:'xAxis2', type:"category", gridLines: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, ticks:{ callback:function(label){ var month = label.split(";")[0]; var year = label.split(";")[1]; if(month === "February"){ return year; }else{ return ""; } } } }], yAxes:[{ ticks:{ beginAtZero:true } }] } } });
<body> <canvas id="c" width="400" height="300"></canvas> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> </body>
var myChart = new Chart(ctx, {
type: "line",
data: {
datasets: [{
data: [20, 50, 100, 75, 25, 0],
label: "Left dataset",
// This binds the dataset to the left y axis
yAxisID: "left-y-axis",
}, {
data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
label: "Right dataset",
// This binds the dataset to the right y axis
yAxisID: "right-y-axis",
}],
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
},
options: {
scales: {
yAxes: [{
id: "left-y-axis",
type: "linear",
position: "left",
}, {
id: "right-y-axis",
type: "linear",
position: "right",
}],
},
},
});
好吧,可能有點晚了;)
我們如何在第二個 x 軸行中顯示最后一個刻度?
使用上面的代碼,我們返回一個空字符串。 我想看看最后一點的標簽。
ticks:{
callback:function(label){
var month = label.split(";")[0];
var year = label.split(";")[1];
if(month === "February"){
return year;
}else{
return ""; **<==== ???**
}
謝謝你的幫助。
編輯
我改變了一點但不完整,就像我不想要標簽在 30 和 31 就在最后一天 waw 31 標簽,30 不是標簽
月份結束於 30 => 標簽
return month;
}else if
(Nbrday === "31"){
return month;
}else if
(Nbrday === "30"){
return month;
}
else{
// return month;
return "";
由於縮放配置已更改,更新已接受的答案也適用於 V3:
var ctx = $("#c"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["January;2015", "February;2015", "March;2015", "January;2016", "February;2016", "March;2016"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3] }] }, options: { scales: { x: { ticks: { callback: function(label) { let realLabel = this.getLabelForValue(label) var month = realLabel.split(";")[0]; var year = realLabel.split(";")[1]; return month; } } }, xAxis2: { type: "category", grid: { drawOnChartArea: false, // only want the grid lines for one axis to show up }, ticks: { callback: function(label) { let realLabel = this.getLabelForValue(label) var month = realLabel.split(";")[0]; var year = realLabel.split(";")[1]; if (month === "February") { return year; } else { return ""; } } } }, y: { beginAtZero: true } } } });
<body> <canvas id="c" width="400" height="300"></canvas> <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.