javascript - Chart JS 在条形图的顶部显示数据值

Question

我刚开始使用 CHART JS，当我想在每个条形图的顶部显示数据值时遇到了问题，当我的鼠标悬停在条形图上时该值消失了。下一个问题是图表顶部的值被裁剪

这是我的代码:

function assignChart(ctx, dataArray) {
    const dataLabel = ["Paris", "Milan", "London", "Florence", "New York", "Not specified"];

    return (new Chart(ctx, {
        type: 'bar',
        data: {
            labels: dataLabel,
            datasets: [{
                data: dataArray,
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            events: [],
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    ticks: {
                        display: false,
                        beginAtZero:true,
                    }
                }]
            },
            animation: {
                duration : 1,
                onComplete : function() {
                    var chartInstance = this.chart,
                    ctx = chartInstance.ctx;

                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function(dataset, i) {
                        var meta = chartInstance.controller.getDatasetMeta(i);
                        meta.data.forEach(function(bar, index) {
                            if (dataset.data[index] > 0) {
                                var data = dataset.data[index];
                                ctx.fillText(data, bar._model.x, bar._model.y);
                            }
                        });
                    });
                }
            }
        }
    }));
}

注意:我正在使用 ChartJS 2.7.3

Answer 1

对于您的数据标签在顶部被裁剪的问题，您可以通过布局选项向布局选项添加填充，如下所示:

layout: {
      padding: {
        left: 0,
        right: 0,
        top: 15,
        bottom: 0
      }
    }

参见 fiddle -> https://jsfiddle.net/xys1tqfn/1/