Chart.Js的样式问题

Question

如何将这些样式添加到我的图形中?我很难在文档中找到它，其他论坛也不是很有帮助。我使用Flask作为后端，所以这就是为什么数据值看起来像这样。

• 标签栏
• 改变字体大小
• 设置y刻度为固定值(0,8)

<script>
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
labels: [
"{{data['battery_icev_car']}}",
"{{data['other_mfg_icev_car']}}", 
"{{data['delivery_icev_car']}}", 
"{{data['tailpipe_icev_car']}}",
"{{data['fuel_cycle_icev_car']}}", 
"{{data['disposal_icev_car']}}", 
"{{data['total_icev_car']}}"
],
data: [  /* errors are normal, fixes when server ru
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, {{data['y2_icev']}}],
[{{data['y2_icev']}}, {{data['y3_icev']}}],
[{{data['y3_icev']}}, {{data['y4_icev']}}],
[{{data['y4_icev']}}, {{data['y5_icev']}}],
[{{data['y5_icev']}}, {{data['y6_icev']}}],
[0, {{data['y6_icev']}}]
],
backgroundColor: [
'rgba(0,0,0,0.9)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
// This doesn't work on axis
font: {
size: 20
}
}
}
},
y: {
beginAtZero: true
}
}
});
</script>         </script>

Answer 1

由于您的配置不工作，我假设您正在使用V3，在这种情况下，解决方案如下:

对于第一点，你需要使用外部插件，你可以自己编写或使用数据标签插件

对于第二个问题，您需要将其样式设置为文档中所述的字体对象，如:

options: {
scales: {
y:{
ticks:{
font:{
size: 50
}
}
}
}
}

对于最后一部分，您可以将stepSize设置为0.8