[英]Chart.js How to change y axis title position
我正在使用 chart.js 庫來創建圖表,我快完成了。 最后一件事是將 yAxis 的標題定位到圖例下方的頂部。
我目前有這樣的事情。
https://i.stack.imgur.com/FD5s7.png
我正在尋找的結果是這樣的。
https://i.stack.imgur.com/4T5l3.png
我真的很感激任何幫助。
代碼: https : //jsfiddle.net/w2qzjhcb/2/
HTML
<canvas id="myChart"></canvas>
JavaScript
var maxValue = 180000;
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.global.defaultFontFamily = "Arial";
Chart.defaults.global.defaultFontSize = 18;
Chart.defaults.global.defaultFontColor = 'black';
Chart.defaults.global.plugins.datalabels.font.size = '15';
Chart.defaults.global.plugins.datalabels.font.weight = 'bold';
function converToSpaced(item){
tisice = (Math.floor(item/1000)).toString();
stovky = (item-(Math.floor(item/1000))*1000).toString();
switch (stovky.length){
case 1:
stovky = "00" + stovky;
break;
case 2:
stovky = "0" + stovky;
break;
case 3:
break;
}
return tisice + ' ' + stovky;
};
var data = {
labels: ["2007", "2008", "2009", "2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"],
datasets: [
{
label: 'zisk Veolia, a.s. v mil. Kč',
data: [
61743,
95242,
125991,
131192,
130616,
149573,
155744,
139540,
128046,
113326
],
backgroundColor: 'black'
},
{
label: 'zisk VHS OL',
data:[
633,
3425,
10636,
12130,
13708,
17095,
23804,
17787,
21820,
20179
],
backgroundColor: '#000e4b'
},
{
label: 'zisk VHS OL',
data:[
9123,
9123,
6748,
6435,
-12623,
5732,
7304,
11167,
9149,
20437
],
backgroundColor: '#009de0'
},
{
label: 'zisk VHS OL',
data:[
5202,
6153,
1803,
1480,
1845,
2403,
3258,
3020,
3343,
3726
],
backgroundColor: '#55d9ff'
},
{
label: 'zisk VHS OL',
data:[
14958,
12393,
19187,
20045,
2930,
25230,
34366,
31974,
34312,
44342
],
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'black'
}
]
};
var stovky;
var tisice;
var myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
scales:{
yAxes: [{
ticks: {
min: 0,
stepSize: 10000,
max: maxValue,
userCallback: function(item){
return converToSpaced(item);
}
},
scaleLabel:{
display: true,
labelString: "Kč | m" + ('\u00B3')
}
}],
xAxes: [{
barPercentage: 1,
categoryPercentage: 1,
}]
},
legend:{
display: true,
position:'top',
labels:{
fontColor:'#000',
fontStyle: 'bold'
}
},
tooltips:{
enabled: true,
callbacks: {
label: function(tooltipItems, data) {
if(tooltipItems.yLabel >= 1000){
tisice = (Math.floor(tooltipItems.yLabel/1000)).toString();
stovky = (tooltipItems.yLabel-(Math.floor(tooltipItems.yLabel/1000))*1000).toString();
switch (stovky.length){
case 1:
stovky = "00" + stovky;
break;
case 2:
stovky = "0" + stovky;
break;
case 3:
break;
}
return tisice + ' ' + stovky + ' Kč';
}
else if(tooltipItems.yLabel <= -1000){
tisice = (Math.ceil(tooltipItems.yLabel/1000)).toString();
stovky = (Math.abs(tooltipItems.yLabel)-Math.abs((Math.ceil(tooltipItems.yLabel/1000))*1000)).toString();
switch (stovky.length){
case 1:
stovky = "00" + stovky;
break;
case 2:
stovky = "0" + stovky;
break;
case 3:
break;
}
return tisice + ' ' + stovky + ' Kč';
}
else{
return tooltipItems.yLabel + ' Kč';
}
},
title: function(tooltipItems, data){
return data.datasets[tooltipItems[0].datasetIndex].label + " za rok " + tooltipItems[0].xLabel;//
}
}
},
plugins: {
datalabels: {
display: true,
align: 'end',
anchor: 'end',
rotation: 270,
color: function(value){
if(value.dataset.data[value.dataIndex] <= 0){
return 'red';
}
else{
return 'black';
}
},
formatter: function(value){
if(value >= 1000){
tisice = (Math.floor(value/1000)).toString();
stovky = (value-(Math.floor(value/1000))*1000).toString();
switch (stovky.length){
case 1:
stovky = "00" + stovky;
break;
case 2:
stovky = "0" + stovky;
break;
case 3:
break;
}
return tisice + ' ' + stovky;
}
else if(value <= -1000){
tisice = (Math.ceil(value/1000)).toString();
stovky = (Math.abs(value)-Math.abs((Math.ceil(value/1000))*1000)).toString();
switch (stovky.length){
case 1:
stovky = "00" + stovky;
break;
case 2:
stovky = "0" + stovky;
break;
case 3:
break;
}
return tisice + ' ' + stovky;
}
else{
return value;
}
}
}
}
}
});
您可以使用options.scales.x.title.padding
參數使用自定義樣式將軸標簽移動到您想要的位置,如下例所示:
options: {
scales: {
x: {
beginAtZero: true,
display: true,
title: {
display: true,
text: 'count',
padding: {top: -5, left: 0, right: 0, bottom: 0}
},
ticks: {
stepSize: 1,
}
},
}
不幸的是,至少目前,這是不可能的。 比例標題選項不支持此類位置更改。 更多信息請參見此處的文檔:
https://www.chartjs.org/docs/latest/axes/labelling.html
也許在 Chart.js github 上提出功能請求會有意義?
https://github.com/chartjs/Chart.js/issues
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.