Question

我很难让y轴上的标签响应。我希望标签移动到多行并且当空间不够时具有响应的字体大小。我正在使用chart.js数据标签用于在horizontalBar Graph顶部标记的库。由于外部图表容器，标签也被隐藏。

var chart = new Chart('ctx', {
    type: 'horizontalBar',
    data: {
        labels: ["Something something something", "blah blah..", "blah blah..","Something something something"],
        datasets: [{
            data: [6, 87, 56,25,100,65],
            backgroundColor: "#4082c4"
        }]
    },
    options:{
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            datalabels: {
                color: 'black',
                anchor: "end",
                align: "right",
                offset: 20,
                display: function (context) {
                    return context.dataset.data[context.dataIndex];
                },
                font: {
                    weight: 'bold',
                    size: 26
                },
                formatter: Math.round
            }
        },
        legend: {
            "display": false
        },
        tooltips: {
            "enabled": false
        },
        scales: {
            yAxes: [{
                barPercentage: 1.0,
                gridLines: {
                    display: false
                },
                ticks: {
                    fontSize: 20,
                    beginAtZero: true,
                }
            }],
            xAxes: [{
                gridLines: {
                    display: false
                },
                ticks: {
                    min: 0,
                    max: 100,
                    stepSize: 20
                }
            }]
        }
    }
    })

栏右侧的数字也会被剪掉。我希望图表水平居中。在浏览器中，图表看起来像这样 - 链接到小提琴： - https://jsfiddle.net/24wdpfxL/

Answer 1

您可以执行此操作，但这有点脚。

首先是数据标签。在datalabels config部分中，您可以尝试以下操作：

            /* Adjust data label font size according to chart size */
            font: function(context) {
                var width = context.chart.width;
                var size = Math.round(width / 32);

                return {
                    weight: 'bold',
                    size: size
                };
            }

根据需要更改尺寸计算。

对于y轴标签，有一个答案here，但是显然是从Chart.js 2.7.0开始的，行：

c.scales['y-axis-0'].options.ticks.fontSize

..应更改为：

c.scales['y-axis-0'].options.ticks.minor.fontSize

（ref）

因此要根据图表高度缩放y轴标签的字体大小，它可能类似于：

plugins: [{
    /* Adjust axis labelling font size according to chart size */
    beforeDraw: function(c) {
        var chartHeight = c.chart.height;
        var size = chartHeight * 5 / 100;
        c.scales['y-axis-0'].options.ticks.minor.fontSize = size;
    }
}]

注意：这需要将“ maintainAspectRatio：”设置为“ true”。

然而，仍然存在一个问题，那就是，即使调整大小，包含y轴标签的图表部分也将保持相同的像素宽度。

我们还需要调整此区域的大小，以使其保持为图表总宽度的恒定百分比，例如40％，而不是固定的像素宽度（已添加到yAxes配置部分）：

        /* Keep y-axis width proportional to overall chart width */
        afterFit: function(scale) {
            var chartWidth = scale.chart.width;
            var new_width=chartWidth*0.4;

            scale.width = new_width;
        }

（您可能不会在原始示例中注意到这是一个问题，因为当窗口放大时，似乎有一条超大的线似乎导致y轴宽度不断扩大。但是，当标签没有溢出时，则除非使用上述宽度，否则宽度保持恒定。）

完成jsFiddle：https://jsfiddle.net/0kxt25v3/2/ （fullscreen）

我不确定要将标签包装到下一行，您可能只需要预处理标签以限制每个标签的最大字符数即可。

我也没有尝试缩放x轴标签的字体大小，但是将其添加到“ beforeDraw：”部分中应该足够容易。

Answer 2

如果您使用的是 chartjs-plugin-datalabels；这是我如何使标签具有响应性。考虑到图表可能有可变的宽度和高度，我们可以得到两者（高度和宽度）的平均值并计算字体大小。我还将最大字体大小限制设置为 12。

    datalabels: {

                font: function (context) {
                    var avgSize = Math.round((context.chart.height + context.chart.width) / 2);
                    var size = Math.round(avgSize / 32);
                    size = size > 12 ? 12 : size; // setting max limit to 12
                    return {
                        size: size,
                        weight: 'bold'
                    };
                },
    }

Answer 3

我最近自己遇到了裁剪问题，并通过设置一个比我的数据集中的最大值更宽的 suggestedMax 值解决了这个问题。

在图表js中使标签响应

3 个答案: