Chart.JS：如何仅在条形宽度足以容纳文本的情况下显示数据标签？

Question

我正在将Chart.JS与Chart.JS datalabel插件一起使用 。 条形图的宽度足以容纳文本时，是否只能显示数据标签？

我有以下示例：

https://jsfiddle.net/f5p3twcg/2/

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    plugins: [ChartDataLabels],
    type: 'bar',
    options: {
        plugins: {
            datalabels: {
                color: '#000000',
                display: true,
                formatter: function(value, ctx) {
                    return value + "kWh";
                }
            }
        }
    },
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Red1", "Blue1", "Yellow1", "Green1", "Purple1", "Orange1", "Red2", "Blue2", "Yellow2", "Green2", "Purple2", "Orange2", "Red3", "Blue3", "Yellow3", "Green3", "Purple3", "Orange3", "Red4", "Blue4", "Yellow4", "Green4", "Purple4", "Orange4"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3, 12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ]
        }]
    }
});

我知道，这个示例没有任何意义，但是您可以看到问题所在。

如果有大量数据，数据标签将像这样溢出条形宽度：

是否可以告诉Chart.JS仅在文本适合条形时才显示这些标签？ （否则，请显示工具提示）。

Answer 1

如果图形没有动态更改大小，则可以使用以下命令创建图表实例后获得条形图的宽度

var width = myChart.getDatasetMeta(0).data[0]._model.width;

并重写您的格式化程序，以检查文本宽度是否不超过栏的宽度

formatter: function (value, ctx) {
    function getTextWidth(text, font) {
        // re-use canvas object for better performance
        var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
        var context = canvas.getContext("2d");
        context.font = font;
        var metrics = context.measureText(text);
        return metrics.width;
    }
    return getTextWidth(value + "kWh") > width ? "" : value + "kWh";
}

请注意我之前在示例中忽略了字体，因此，如果进行了任何更改，则必须手动提取它。

您甚至可以编写一个插件，在渲染之前将其写入var width变量

plugins: [
    ChartDataLabels,
    {
        beforeRender: (myChart) => { width = myChart.getDatasetMeta(0).data[1]._model.width;}
    }
],

Answer 2

Krzysztof Krzeszewski的解决方案起作用。 但是，在我的情况下，我必须对其稍加调整并添加一些针对'undefined'检查：

if (typeof chart !== 'undefined') {
    let datasetData = chart.getDatasetMeta(0);

    if (datasetData !== 'undefined') {
        if (datasetData.data.length > 0) {
            barWidth = chart.getDatasetMeta(0).data[0]._model.width;
        }
    }
}