如何强制显式显示值的“.0”部分 (Chart.JS)？

Question

我的图表有以下数据：

datasets: [
{
    label: "Price Compliant",
    backgroundColor: "rgba(34,139,34,0.5)",
    hoverBackgroundColor: "rgba(34,139,34,1)",
    data: [99.0, 99.2, 99.4, 98.9, 99.1, 99.5, 99.6, 99.2, 99.7]
},
{
    label: "Non-Compliant",
    backgroundColor: "rgba(255, 0, 0, 0.5)",
    hoverBackgroundColor: "rgba(255, 0, 0, 1)",
    data: [1.0, 0.8, 0.6, 1.1, 0.9, 0.5, 0.4, 0.8, 0.3]
}
]

...看起来像这样：

如您所见，第一个数据点 (99.0) 显示为 99，截断了“.0”部分。

当然，这有一些逻辑，但 GUI 纳粹希望保留“.0”。

我需要做什么才能强制显示 "meaningless" 部分数据？

更新

afterDraw() 事件，对于 Jaromanda X:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        if (chartInstance.id !== 1) return; // affect this one only
        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 + 180, model.y + 6);
                //ctx.fillText(dataset.data[i], model.base + 20, model.y + 6);
            }
        });
    }
});

Answer 1

如, this is a known issue所述。

但是您仍然有几个解决方法可以让它工作：

只需将您的数据更改为字符串即可： (fiddle link)

例如你的数据是这样的:

{
    label: "Price Compliant",
    backgroundColor: "rgba(34,139,34,0.5)",
    hoverBackgroundColor: "rgba(34,139,34,1)",
    data: ["99.0", "99.2", "99.4", "98.9", "99.1", "99.5", "99.6", "99.2", "99.7"]
}

Chart.js 会将其作为经典字符串处理，然后不会删除“.0”。

在您的代码中添加“.0”，使用 plugins : (fiddle link)

一个小条件（使用ternaries）可以使编写和阅读变得容易：
```
ctx.fillText(dataset.data[i] + (Number.isInteger(dataset.data[i]) ? ".0" : "") + "%", ((model.x + model.base) / 2 ), model.y + (model.height / 3));
```
它基本上是检查值是否为整数（无小数），如果是则在字符串中添加“.0”。
这两个代码都会给您以下结果：

如何强制显式显示值的“.0”部分 (Chart.JS)？

How can I force the ".0" portion of a value to explicitly display (Chart.JS)?

javascript

chart.js

decimal-point

trailing

chart.js2

更新