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，在这种情况下解决方案如下：

对于第一点，您需要使用外部插件，您可以自己编写或使用 datalabels plugin

对于第二个问题，您需要按照 documentation 中所述将其设置为字体对象样式：

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

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

Chart.Js 的样式问题

Styling problems with Chart.Js

javascript

charts

chart.js