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

Posted 2023-05-08

【中文标题】为chart.js中的水平条添加值

【英文标题】：Add value to horizontal bar in chart.js

【发布时间】：2021-07-07 15:02:23

【问题描述】：

我一直在寻找一种方法，使用 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();

【参考方案1】：

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

【讨论】：

谢谢。请更改您的评论以回答，我会将其标记为答案。这效果很好。

这是一个答案:)

噢！我现在醒了。

我这里也有问题；我想知道您是否也可以提供帮助：***.com/questions/67064726/…