如何修复图表中的条形图。带有长标签的js

Question

我用图表。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 或附加图例的一些选项？

谢谢

Answer 1

您在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"];

你可以用一个数组代替一个标签，数组中的每个元素都将被视为一个新行(见js fiddle):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）的元素数组（参见JSIDLE）：https://jsfiddle.net/jhr5nm17/

这是用多行标签替换长标签的两种简单方法，希望有所帮助。