为chart.js中的水平条添加值

Question

我一直在寻找一种方法，使用 chart.js 在水平条形图中的每个条形内添加值，但所有帖子似乎都显示了如何添加标签。工具提示同时显示标签和值，但我想显示值，以便用户无需将鼠标悬停在栏上即可看到结果。

我在脚本中设置了断点，以查看是否有“模型”的任何属性包含该值但找不到。

这就是我设置图表的方式，包括显示标签而不是值的动画部分。

数据集来自 ajax 调用，图表显示在其 onSuccess 中：

function OnSuccess_(response) {
    var jResult = JSON.parse(response.d);
    var chartLabels = [];
    var chartData = []

    $.each(jResult, function (index, val) {
        chartLabels.push(val.TIMERANGE);
        chartData.push(val.COUNT);      // <--- This is what I want to display on each bar
    });
    var ctx = document.getElementById("rtChart").getContext("2d");

    if (chartRespTime)
        chartRespTime.destroy();

    chartRespTime = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: chartLabels,
            datasets: [{
                label: "Response Time (ms)",
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                data: chartData
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Database Response Time (milli-seconds)'
            },
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count'
                    },
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                        }
                    }
                }],
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Response Time (ms)'
                    }
                }]
            },
            animation: {
                onComplete: function () {
                    var ctx = this.chart.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset) {
                        for (var i = 0; i < dataset.data.length; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                left  = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
                            ctx.fillStyle = '#444'; // label color
                            var label = model.label;   // <--- need value not label
                            ctx.fillText(label, left + 15, model.y + 8);
                        }
                    });
                }                        
            },
            maintainAspectRatio: false,
            responsive: true,
            showInlineValues: true,
            centeredInllineValues: true,
            tooltipCaretSize: 0
        }
    });
    //console.log(ctx);
    $('#rtChart').show();
}

Answer 1

没有内置的方法可以做到这一点，但是有一个非常好的插件可以实现你想要的：datalabels 插件https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html