javascript - 如何修复带有长标签的 Chart.js 中的条形图

Question

我在我的应用程序中使用 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 或附加图例的一些选项？

谢谢!

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

您可以用数组替换标签，数组的每个元素都将被视为一个新行(参见 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/

---

这是通过将长标签替换为多行标签来处理长标签的两种简单方法，希望对您有所帮助。