Javascript 向气泡图（Chart.js）的一个点添加标签

我在给气泡图上的点添加标签时遇到困难

我正在尝试为每个数据集指定与图例相同的标签

我试图给这些点指定一个标签，但我似乎只能显示它的值

我想在上面显示点的值，在下面显示一个自定义标签（如下面的第二幅图）

这是我迄今为止在图表上的进展代码

<script>

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

var myChart = new Chart(ctx, {

    type: 'bubble',

    data: {
        datasets: [
            {
                label: 'Top',
                data: [
                    {x: 110, y: 0, r: 10, name: "Performance"}
                ],
                backgroundColor: "rgba(153,255,51,0.6)"
            },
            {
                label: 'Average',
                data: [
                    {x: 75, y: 0, r: 10, name: "Performance"}
                ],
                backgroundColor: "rgba(153,255,51,0.6)"
            },
            {
                label: 'You 2017',
                data: [
                    {x: 55, y: 0, r: 10, name: "Performance"}
                ],
                backgroundColor: "rgba(153,255,51,0.6)"
            },
            {
                label: 'You 2018',
                data: [
                    {x: 90, y: 0, r: 10, name: "Performance"} // The labe needs to be
                ],
                backgroundColor: "rgba(255,0,128,0.6)"
            }
        ]
    },
    pointDot : true,
    options: {
        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.backgroundColor : 'white';
                },
                font: {
                    weight: 'bold'
                },
                formatter: function (value) {
                    return 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
                    }
                }
            ]

        }
    }

});

</script>

var ctx=document.getElementById（'myChart'）.getContext（'2d'）；
var myChart=新图表（ctx{
类型：'气泡'，
数据：{
数据集：[
{
标签：“顶部”，
数据：[
{x:110，y:0，r:10，名称：“性能”}
],
背景颜色：“rgba（153255,51,0.6）”
},
{
标签：'平均'，
数据：[
{x:75，y:0，r:10，名称：“性能”}
],
背景颜色：“rgba（153255,51,0.6）”
},
{
标签：“你2017”，
数据：[
{x:55，y:0，r:10，名称：“性能”}
],
背景颜色：“rgba（153255,51,0.6）”
},
{
标签：“您2018”，
数据：[
{x:90，y:0，r:10，name:“Performance”}//需要
],
背景颜色：“rgba（255,0128,0.6）”
}
]
},
是的，
选项：{
插件：{
数据标签：{
锚定：函数（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？'end'：'center'；
},
对齐：函数（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？'end'：'center'；
},
颜色：功能（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？context.dataset.backgroundColor:“白色”；
},
字体：{
重量：“粗体”
},
格式化程序：函数（值）{
返回Math.round（value.x）；
},
抵销：2，
填充：0
}
},
MaintaintAspectRatio:false，
比例：{
雅克斯：[{
id:'第一个y轴'，
类型：'线性'，
滴答声：{
分:0,，
最高：1，
步长：1，
显示：假
},
网格线：{
显示：假，
抽边线：假
}
}],
xAxes：[
{
id:'第一个x轴'，
滴答声：{
最小值：50，//控制轴的起始位置
最大值：120，//控制轴完成的位置
步长：70//控制第一个x轴值和最后一个x轴值之间的间隙
},
网格线：{
显示：假，
线宽：3//底线宽度
}
}
]
}
}
});

---

我非常感谢任何帮助或建议^ ^

通过以下方式修改您的datalabels插件配置：

   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.backgroundColor : 'white';
        },
        font: {
            weight: 'bold'
        },
        formatter: function (value, context) {
            return context.dataset.label;
        },
        offset: 2,
        padding: 0
    }

数据标签：{
锚定：函数（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？'end'：'center'；
},
对齐：函数（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？'end'：'center'；
},
颜色：功能（上下文）{
var值=context.dataset.data[context.dataIndex]；
返回值.x<1000？context.dataset.backgroundColor:“白色”；
},
字体：{
重量：“粗体”
},
格式化程序：函数（值、上下文）{
返回context.dataset.label；
},
抵销：2，
填充：0
}

还有一个

上下文

参数，该参数包含与数据集类似的标签的信息

---

这是一把小提琴：

这把小提琴非常好！你知道我如何在下面对齐它吗？等等，我想出来了，你可以把它设置为“开始”：“居中”；在“定位和对齐”设置下