在图表 js 中使标签具有响应性

Question

我很难使 y 轴中的标签响应。我希望标签移动到多行，并在空间不足时具有响应的字体大小。我正在使用 chart.js 数据标签库进行标记在水平条形图的顶部。此外，由于外部图表容器，标签也被隐藏了。

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

你可以这样做，但它有点hack-y。

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

            /* 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轴的标签，有一个答案在这里，但显然因为chart.js之2.7.0，该行：

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

..应该改为：

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

（参考）

因此，要根据图表高度缩放 ​​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/ （全屏）

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

我也没有尝试缩放 x 轴标签字体大小，但是将它添加到“beforeDraw:”部分应该很容易。