我在这里有条形图https://jsfiddle.net/2fuL5x7b/ 我对这三个感到有些困惑。请帮助
1。图表标题文字左对齐(而不是左对齐)
2。 x轴标签以自动调整,就像最后一个类别一样,不应超出条形数据区域(因此可以是3行,中心文本对齐)。 3。需要字幕位于底部的图例下方,文本左对齐。
请参阅jsfiddle上的完整代码,谢谢
var options = {
type: 'bar',
data: {
labels: ["Leadership","Traning","Incentivisation","Office environment","Education",
"Employment legislation and regluation"],
datasets: [
{
label: '2018',
data: [0.6,0.5,0.47,0.42,0.35,0.29
],
backgroundColor: '#182540',
borderColor: '#182540',
borderWidth: 1
},
{
label: '2016',
data: [0.65,0.5,0.55,0.49,0.41,0.32
],
backgroundColor: '#0073CF',
borderColor: '#0073CF',
borderWidth: 1
}
]
},
options: {
title: {
display: true,
text: 'chart title',
padding:25,
fontSize: 15,
fontFamily: 'Noto Serif',
x:0
},
legend: {
display: true,
position: 'bottom',
labels: {
fontColor: '#182540'
}
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let percentage = (value*100).toFixed(0)+"%";
return percentage;
},
anchor: 'end',
align: 'end',
color: '#888'
}
},
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
suggestedMax:1,
reverse: false,
callback: function(value, index, values) {
return (value*100) +"%";
}
}
}],
xAxes: [{
type: 'category',
ticks: {
maxRotation: 0,
autoSkip: false,
maxTicksLimit: 20
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);