Javascript Chart.js如何更改y轴标题位置

Javascript Chart.js如何更改y轴标题位置,javascript,chart.js,yaxis,Javascript,Chart.js,Yaxis,我正在使用chart.js库创建一个图形,我几乎完成了。最后一件事是将亚克斯人的头衔放在传说的正下方 我现在有类似的东西 我想要的结果是这样的 我真的很感激任何帮助 代码: HTML <canvas id="myChart"></canvas> JavaScript var maxValue = 180000; var ctx = document.getElementById("myChart").getContext('2d'); Chart.de

我正在使用chart.js库创建一个图形,我几乎完成了。最后一件事是将亚克斯人的头衔放在传说的正下方

我现在有类似的东西

我想要的结果是这样的

我真的很感激任何帮助

代码:

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;
                                } 
                        }                        

                    }
                }        
    }
});
var maxValue=180000;
var ctx=document.getElementById(“myChart”).getContext(“2d”);
Chart.defaults.global.defaultFontFamily=“Arial”;
Chart.defaults.global.defaultFontSize=18;
Chart.defaults.global.defaultFontColor='黑色';
Chart.defaults.global.plugins.datalabels.font.size='15';
Chart.defaults.global.plugins.datalabels.font.weight='bold';
功能转换面板(项目){
tisice=(数学地板(项目/1000)).toString();
stovky=(项目-(数学地板(项目/1000))*1000.toString();
开关(stovky.长度){
案例1:
stovky=“00”+stovky;
打破
案例2:
stovky=“0”+stovky;
打破
案例3:
打破
}
返回tisice+“”+stovky;
};
风险值数据={
标签:[“2007”、“2008”、“2009”、“2010”、“2011”、“2012”、“2013”、“2014”、“2015”、“2016”、“2017”、“2018”],
数据集:[
{
标签:“zisk Veolia,a.s.诉mil.Kč”,
数据:[
61743,
95242,
125991,
131192,
130616,
149573,
155744,
139540,
128046,
113326
],
背景颜色:“黑色”
},
{            
标签:“zisk VHS OL”,
数据:[
633,
3425,
10636,
12130,
13708,
17095,
23804,
17787,
21820,
20179
],
背景颜色:“#000e4b”
},
{
标签:“zisk VHS OL”,
数据:[
9123,
9123,
6748,
6435,
-12623,
5732,
7304,
11167,
9149,
20437
],
背景颜色:“#009de0”
},
{
标签:“zisk VHS OL”,
数据:[
5202,
6153,
1803,
1480,
1845,
2403,
3258,
3020,
3343,
3726
],
背景颜色:“#55d9ff”
},
{
标签:“zisk VHS OL”,
数据:[
14958,
12393,
19187,
20045,
2930,
25230,
34366,
31974,
34312,
44342
],
背景颜色:“白色”,
边框宽度:1,
边框颜色:“黑色”
}
]
};
var stovky;
变异性;
var myChart=新图表(ctx{
类型:'bar',
数据:数据,
选项:{
比例:{
雅克斯:[{
滴答声:{
分:0,,
步长:10000,
max:maxValue,
userCallback:函数(项){
返回converToSpaced(项目);
}
},
scaleLabel:{
显示:对,
标签字符串:“K|m”+(“\u00B3”)
}
}],
xAxes:[{
百分比:1,
类别类别:1,
}]
},
图例:{
显示:对,
位置:'顶部',
标签:{
fontColor:“#000”,
字体:“粗体”
}
},  
工具提示:{
启用:对,
回调:{
标签:函数(工具提示项、数据){
如果(tooltipItems.yLabel>=1000){
tisice=(Math.floor(tooltipItems.yLabel/1000)).toString();
stovky=(tooltipItems.yLabel-(Math.floor(tooltipItems.yLabel/1000))*1000.toString();
开关(stovky.长度){
案例1:
stovky=“00”+stovky;
打破
案例2:
stovky=“0”+stovky;
打破
案例3:
打破
}
返回tisice+''+stovky+'Kč';
}

else if(tooltipItems.yLabel您可以使用
选项.scales.x.title.padding
参数使用自定义样式将轴标签移动到所需的位置,如下例所示:

选项:{
比例:{
x:{
贝吉纳泽罗:是的,
显示:对,
标题:{
显示:对,
文本:“计数”,
填充:{top:-5,left:0,right:0,bottom:0}
},
滴答声:{
步长:1,
}
},
}
Whe