如何使用长标签修复Chart.js中的栏

我在我的应用程序中使用Chart.js(版本:2.7.2),结果行中的一些标签相当长

        var barCanvas = document.getElementById("canvasVoteNames");
        var ctx = barCanvas.getContext('2d');

        var numberWithCommas = function(x) {
            return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        };
        var self = this;
        var myChart = new Chart(ctx, {  // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/
            type: 'bar',
            data: {
                labels:monthsXCoordItems,
                datasets: [

                    {
                        label: 'Correct Votes',
                        data: voteValuesCorrect,
                        borderWidth: 1,           // The stroke width of the bar in pixels.

                        backgroundColor : formatColor('#05b932'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors
                        borderColor: formatColor('#05b932'),// rgba(255, 0, 0, 0.1) // The color of the bar border.

                        hoverBackgroundColor : formatColor('#05b932'),   // The fill colour of the bars when hovered.
                        hoverBorderColor: formatColor('#05b932'),        //    The stroke colour of the bars when hovered.
                        hoverBorderWidth : 1                             //    The stroke width of the bars when hovered.
                    },

                    {
                        label: 'Incorrect Votes',
                        data: voteValuesNoneCorrect,
                        borderWidth: 1,           // The stroke width of the bar in pixels.

                        backgroundColor : formatColor('#b1a19a'), //rgba(0, 0, 0, 0.1), // The fill color of the bar. See Colors
                        borderColor: formatColor('#b1a19a'),// rgba(255, 0, 0, 0.1) // The color of the bar border.
                        hoverBackgroundColor : formatColor('#b1a19a'),   // The fill colour of the bars when hovered.
                        hoverBorderColor: formatColor('#b1a19a'),        //    The stroke colour of the bars when hovered.
                        hoverBorderWidth : 1                             //    The stroke width of the bars when hovered.
                    },

                ]
            },

            options: { // options of Report By Vote Names
                animation: {
                    duration: 10,
                },

                tooltips: { // tooltip text of Report By Vote Days ( 'bar' report )
                    mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data.datasets[tooltipItem.datasetIndex].label + ": " + numberWithCommas(tooltipItem.yLabel);
                        }
                    }
                }, // tooltips: { // tooltip text of Report By Vote Days ( 'bar' report )

                scales: { // options for x and y scales
                    xAxes: [{
                        stacked: true,    // Stacked bar charts can be used to show how one data series i
                        gridLines: { display: false },
                    }],
                    yAxes: [{
                        stacked: true,  // Stacked bar charts can be used to show how one data series i
                        ticks: {
                            callback: function(value) { // on Y scale show only integer without decimals
                                if (Math.floor(value) === value) {
                                    return value;
                                }
                            },  // callback: function(value) { return numberWithCommas(value); },
                        },
                    }],
                }, // scales: { // options for x and y scales
                legend: {display: true}
            } // options: { // options of Report By Vote Names

        }); // var myChart = new Chart(ctx, {  // stacked bar report https://jsfiddle.net/sdfx/hwx9awgn/

}

我得到的图表是我需要的 https://imgur.com/a/n1SsW7w 但是对于任何条形图都有长标签它看起来不太好我没有找到是否有办法以某种方式修复它？为什么标签有很大的贬值,而不是相对的酒吧？

xAxes或附加图例的一些选项？

谢谢!

您在JSFiddle中使用ChartJs版本2.1.3,它似乎不处理多行标签

您可以将多行标签与以下解决方案一起使用:

var dates = [["Some l-o-o-o-o-", "o-o-o-o-o-o-o-", "n-n-n-n-n-n-g-g-g-", "g-g-g-g label"], "DDD", ["EEE", "FFF", "GGG"], "HHH", "III"];

您可以用数组替换标签,并将数组的每个元素视为一个新行(请参阅JSFiddle):https://jsfiddle.net/cyuwxh3q/

如果您的标签是以动态方式生成的,则可以使用图表配置中的插件拆分它们:

type: 'bar',
data: {...},
options: {...},
plugins: [{
    beforeInit: function (chart) {
        chart.data.labels.forEach(function (value, index, array) {
            var a = [];
            a.push(value.slice(0, 5));
            var i = 1;
            while(value.length > (i * 5)){
                a.push(value.slice(i * 5, (i + 1) * 5));
                i++;
            }
            array[index] = a;
        })
    }
}]

此函数将每个标签转换为长度小于或等于给定值的元素数组(此处为5)(请参阅JSFiddle):https://jsfiddle.net/jhr5nm17/

这是通过多线标签替换它们来处理长标签的两种简单方法,希望它有所帮助.