将数据标签对齐到气泡图上的某个点下方 (Chart.JS)

Question

我正在尝试将与数据集相关的标签放在气泡图上某个点的下方，并将值显示在该点的顶部。

我已经尝试 return 两个不同的值，但它只允许我 return 一个。

因此，我 return 在同一个字符串中编辑了两个值。

是否可以 return 标签并将其定位在数据集的值下方，并将值放在数据集的点上方？

如果不可能，是否可以在我添加到字符串中的换行符后以某种方式让文本居中对齐？

Here is what I have so far

This is what I am trying to achieve, but with the value above the bubble

到目前为止，这是我的代码：

var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {

    type: 'bubble',

    data: {
        datasets: [
            {
                label: 'Top',
                data: [
                    {x: 110, y: 0, r: 12, name: "Performance"}
                ],
                backgroundColor: "rgba(255,255,255,1)",
                borderColor: "rgba(91,182,209,1)",
                borderWidth: 2,
                hoverBackgroundColor: "rgba(255,255,255,1)",
                hoverBorderWidth : 2
            },
            {
                label: 'Average',
                data: [
                    {x: 75, y: 0, r: 12, name: "Performance"}
                ],
                backgroundColor: "rgba(255,255,255,1)",
                borderColor: "rgba(91,182,209,1)",
                borderWidth: 2,
                hoverBackgroundColor: "rgba(255,255,255,1)",
                hoverBorderWidth : 2
            },
            {
                label: 'You 2017',
                data: [
                    {x: 55, y: 0, r: 15, name: "Performance"}
                ],
                backgroundColor: "rgba(255,255,255,1)",
                borderColor: "rgba(91,182,209,1)",
                borderWidth: 2,
                hoverBackgroundColor : "rgba(255,255,255,1)",
                hoverBorderWidth : 2
            },
            {
                label: 'You 2018',
                data: [
                    {x: 90, y: 0, r: 15, name: "Performance"} // The labe needs to be
                ],
                backgroundColor: "rgba(255,255,255,1)",
                borderColor: "rgba(91,182,209,1)",
                borderWidth: 2,
                hoverBackgroundColor : "rgba(255,255,255,1)",
                hoverBorderWidth : 2
            }
        ]
    },
    options: {
        legend: {
            display: false
        },
        plugins: {
            datalabels: {
                anchor: function (context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.x < 1000 ? 'end' : 'center';
                },
                align: function (context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.x < 1000 ? 'end' : 'center';
                },
                color: function (context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value.x < 1000 ? context.dataset.borderColor : 'white';
                },
                font: {
                    weight: 'bold'
                },
                formatter: function (value, context) {
                    ctx.textAlign = "center";
                    return context.dataset.label + "\n" + Math.round(value.x);
                },
                offset: 2,
                padding: 0
            }
        },
        maintainAspectRatio: false,
        scales: {
            yAxes: [{
                id: 'first-y-axis',
                type: 'linear',
                ticks: {
                    min: 0,
                    max: 1,
                    stepSize: 1,
                    display: false
                },
                gridLines: {
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [
                {
                    id: 'first-x-axis',
                    ticks: {
                        min: 50, // Controls where axis starts
                        max: 120, // Controls where axis finishes
                        stepSize: 70 // Control the gap between the first x-axis value and the last x-axis value
                    },
                    gridLines: {
                        display: false,
                        lineWidth: 3 // Width of bottom line
                    }
                }
            ]

        }
    }

});

如有任何帮助或建议，我们将不胜感激^_^

Answer 1

我通过在图表参数中应用 'textAlign' 并将其设置为中心来解决这个问题。

您可以在下面的代码中看到这一点：

plugins: {
    datalabels: {
        anchor: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? 'end' : 'center';
        },
        align: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? 'end' : 'center';
        },
        color: function (context) {
            var value = context.dataset.data[context.dataIndex];
            return value.x < 1000 ? context.dataset.borderColor : 'white';
        },
        textAlign: 'center',
        font: {
            weight: 'bold',
            alignment: 'right' // Is this the place to be doing this?
        },
        formatter: function (value, context) {
            return context.dataset.label + '\n' + Math.round(value.x);
        },
        offset: 2,
        padding: 0
    }
},

希望对你有帮助^^

将数据标签对齐到气泡图上的某个点下方 (Chart.JS)

Align a data label below a point on a bubble graph (Chart.JS)

javascript

css

chart.js

chart.js2