如何在 Chart.js 中的条形顶部添加计算值？

Question

我正在根据需要获取悬停时的数据值：

...但我还想在每个栏的顶部添加一个值，如下所示：

如何获取计算数据并将其嵌入到每个条中？

我的代码如下：

HTML

<div class="graph_container">
    <canvas id="priceComplianceBarChart"></canvas>
</div>

JQUERY

    Chart.defaults.global.defaultFontFamily = "Georgia";

    var ctxBarChart = 
$("#priceComplianceBarChart").get(0).getContext("2d");
    var barChartData = {
        labels: ["Bix Produce", "Capitol City", "Charlies Portland", 
"Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo
West", "Paragon", "Piazza Produce"],
        datasets: [
            {
                label: "Price Compliant",
                backgroundColor: "rgba(34,139,34,0.5)",
                hoverBackgroundColor: "rgba(34,139,34,1)",
                data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027,
25553]
            },
            {
                label: "Non-Compliant",
                backgroundColor: "rgba(255, 0, 0, 0.5)",
                hoverBackgroundColor: "rgba(255, 0, 0, 1)",
                // The vals below have been multiplied by 10 (a 0
appended) so that the values are at least visible to the naked eye
                data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
            }
        ]
    }

    var optionsBar = {
        scales: {
            xAxes: [
                {
                    stacked: true
                }
            ],
            yAxes: [
                {
                    stacked: true
                }
            ]
        },
        showInlineValues: true,
        centeredInllineValues: true,
        label: {
            font: {
                family: "Georgia"
            }
        }
    };

    var priceBarChart = new Chart(ctxBarChart, {
        type: 'horizontalBar',
        data: barChartData,
        options: optionsBar
    });
    priceBarChart.defaults.global.defaultFont = "Georgia";

更新

Dekel：您的答案非常接近 - 这是我在未更改代码的情况下看到的结果：

因此，不仅放置在栏上的值需要更靠右，我还需要像以前一样显示悬停数据（它现在被截断了一点，如您在屏幕截图中所见）并且，而不是在条形的每个段上显示的两个值，一个 % 值（两个值中较大的 % 是两个数字的组合值）。

注：另一题同理（其实我所有的题只要还有点数）：我会悬赏最多允许积分 (500).

更新 2

通过更改此代码：

ctx.fillText(dataset.data[i], model.base + 10, model.y + 5);

...为此：

ctx.fillText("99.9%", model.base + 25, model.y + 6);

...我现在看到条形图上的数字右对齐（但是，当然，它们都是 bogus/mock 值）。不过，悬停值仍然被截断，我不需要在每个条的末尾重复该值（现在是“99.9%”）。

Answer 1

您可以使用 afterDraw 的 pluginService 注册一个新函数：

Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.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;
                ctx.fillText(dataset.data[i], model.base + 10, model.y+5);
            }
        });
    }
});

如果您需要计算一些东西，您可以将 ctx.fillText 中的 dataset.data[i] 替换为您拥有的计算数据。

如何在 Chart.js 中的条形顶部添加计算值？

How can i add a calculated value on top of the bars in Chart.js?

jquery

chart.js

chart.js2

更新

更新 2