时间戳

首页 > 解决方案 > 图表 js 填充不适用于数据标签

javascript - 图表 js 填充不适用于数据标签

问题描述

我尝试在我的图表上方添加填充，但它不起作用。我去了图表的 options.layout.padding 部分。数据标签只是放在栏的顶部，看起来非常糟糕。 因此，无论是在图表上方添加填充的方法，还是将标签固定在条形顶部的某种方法都会有所帮助。我正在使用 Chart js 数据标签插件。

Javascript代码：

<div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <canvas id="myChart" class="bar-chart"></canvas>
            <script>
            Chart.register(ChartDataLabels); /* Register chart for data label plugin */
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
                    value_labels: [ /* labels above the chart */
                        {{data['icev_lit_bat']}}, 
                        ... (Ommited for space)
                    ],
                    datasets: [{
                        label: 'ICEV CAR (MTCO2e/Year)',
                        data: [  /* errors are normal, fixes when server runs the code*/
                            [0, {{data['y1_icev']}}],
                            [{{data['y1_icev']}}, ... ommited for space
                        ],
                        backgroundColor: [
                            'rgba(0,0,0,0.3)'
                        ],
                        borderColor: [
                            'rgba(0,0,0,1)'
                        ],
                        borderWidth: 1,
                        borderSkipped: false
                    }]
                },
                options: { /* Chart settings */
                    scales: {
                        y:{
                            ticks:{
                                font:{
                                    size: 20
                                },
                                stepSize:0.5
                            },
                            max: 7,
                            min: 0,
                            stepSize: 1
                        },
                        x:{
                            ticks:{
                                font:{
                                    size: 18
                                },
                            },
                        }    
                    },
                    layout: {
                        padding: {
                            left: 0,
                            right: 0,
                            top: 30,
                            bottom: 0
                        }
                    },
                    responsive: false,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            labels: {
                                font: {
                                    size: 20
                                }
                            }
                        },
                        datalabels: {
                            color: '#000',
                            anchor: 'end',
                            formatter: function(value, context) { /* sets custom labels */
                                return context.chart.data.value_labels[context.dataIndex];
                            }
                        }
                    },
                    y: {
                        beginAtZero: true
                    }
                }
            });
            </script>
        </div>

标签： javascriptchart.js

解决方案

我想到了。您需要使用 align: 'top'

plugins: {
    legend: {
        labels: {
            font: {
                size: 20
            }
        }
    },
    datalabels: {
        color: '#000',
        anchor: 'end',
        align: 'top',
        formatter: function(value, context) { /* sets custom labels */
            return context.chart.data.value_labels[context.dataIndex];
        }
    }
},

推荐阅读