javascript - Chart.js StackedBar 不显示条上的标签和最大 y 值

问题描述

我在 Stackoverflow 上看到了另一个帖子，这就是我想要做的。我的 ASP.NET Core Web 应用程序中有我很棒的图表Chart.js@2.9.4。我从 API 读取数据。

当我阅读时，我在我的项目中添加了chartjs-plugin-datalabelsscript并将其添加到页面中。

$.ajax({
    url: 'myapi',
    dataType: 'json'
})
    .fail(function (err) {
        alert(err);
    })
    .done(function (data) {
        $("#chart").html('');
        $("#chart").html('<canvas id="barChart" style="min-height: 300px; height: 3000px; max-height: 300px; max-width: 100%;"></canvas>');

        var stackedBarChartCanvas = $('#barChart').get(0).getContext('2d')
        var stackedBarChartData = $.extend(true, {}, data)
        var temp0 = data.datasets[0]
        var temp1 = data.datasets[1]
        stackedBarChartData.datasets[0] = temp1
        stackedBarChartData.datasets[1] = temp0

        var stackedBarChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function (tooltipItem, data) {
                        return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                    }
                }
            },
            scales: {
                xAxes: [{
                    stacked: true,
                }],
                yAxes: [{
                    stacked: true,
                    max: 100,
                    ticks: {
                        callback: function (value) {
                            return numberWithCommas(value);
                        },
                    },
                }]
            },
            plugins: {
                datalabels: {
                    display: true,
                    align: 'center',
                    anchor: 'center',
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 15;
                    },
                    font: {
                        weight: 'bold'
                    },
                    formatter: Math.round
                }
            }
        }

        var stackedBarChart = new Chart(stackedBarChartCanvas, {
            type: 'bar',
            data: stackedBarChartData,
            options: stackedBarChartOptions,
            onAnimationComplete: function () {
                var ctx = this.chart.ctx;
                ctx.font = this.scale.font;
                ctx.fillStyle = this.scale.textColor
                ctx.textAlign = "center";
                ctx.textBaseline = "bottom";

                this.datasets.forEach(function (dataset) {
                    dataset.bars.forEach(function (bar) {
                        ctx.fillText(bar.value, bar.x, bar.y - 5);
                    });
                })
            }
        })
    })

如果我将鼠标移到图表上，什么也不会发生，但在控制台中我有这个错误

未捕获的类型错误：无法读取 null 的属性 'r' (Chart.js:1655)

另外，我想将 y 轴的最大值固定为 100，因为只有百分比。虽然，我将其设置y-axis为 100，但图表显示为 120。

标签： javascriptchart.js

javascript - Chart.js StackedBar 不显示条上的标签和最大 y 值

问题描述

解决方案

推荐阅读