将数据标签添加到 chart.js 上的气泡图

Question

我在 Chart.js 上使用了气泡图来创建滑块以显示可比较的性能，它们目前看起来有点像这样：

我想做什么

我想在我的“气泡”上方/中添加数据标签，其中包含我的值。就像您可以在此处在每个气泡上看到的“10”一样。

我做了什么来实现这一目标

这不是标准的 Chart.js 功能，但我发现这篇文章正在讨论条形图/折线图的类似问题。

我已经安装了建议的插件，但它显示的数据标签是气泡的半径，我希望它是气泡的 x 轴。

我还尝试使用该帖子中一些答案中的代码，但绝对没有运气。

我的代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<div class="container" >
    <h2>Chart.js — Line Chart Demo</h2>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</div>

<script>

    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.height = 1000;
    var myChart = new Chart(ctx, {

        type: 'bubble',
        data: {
            datasets: [
                {
                    label: 'Your Data',
                    data: [
                        {x: 78.7, y: 0, r: 10, name: "Performance"}
                    ],
                    backgroundColor: "rgba(153,255,51,0.6)"
                },
                {
                    label: 'Average',
                    data: [
                        {x: 100.7, y: 0, r: 10, name: "Performance"} // The labe needs to be X. not R.
                    ],
                    backgroundColor: "rgba(255,0,128,0.6)"
                }
            ]
        },
        options: {
            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: [{
                    ticks: {
                        min: 50, // Controls where axis starts
                        max: 120 // Controls where axis finishes
                    },
                    gridLines: {
                        display: false,
                        lineWidth: 3 // Width of bottom line
                    }
                }]
            }
        }



    });

</script>

提前致谢

Answer 1

我设法找到了这个问题的答案，基本上是通过从 chartjs-plugin-datalabels 插件中分离气泡图示例。

下面是一个工作示例。 注意选项中的“插件”部分。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

<div class="container" >
    <h2>Chart.js — Line Chart Demo</h2>
    <div>
        <canvas id="myChart"></canvas>
    </div>
</div>

<script>

    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.height = 1000;
    var myChart = new Chart(ctx, {

        type: 'bubble',
        data: {
            datasets: [
                {
                    label: 'Your Data',
                    data: [
                        {x: 78.7, y: 0, r: 10, name: "Performance"}
                    ],
                    backgroundColor: "rgba(153,255,51,0.6)"
                },
                {
                    label: 'Average',
                    data: [
                        {x: 100.7, y: 0, r: 10, name: "Performance"} // The labe needs to be
                    ],
                    backgroundColor: "rgba(255,0,128,0.6)"
                }
            ]
        },
        options: {
            plugins: { // Look at this bit
                datalabels: {
                    anchor: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? 'end' : 'center';
                    },
                    align: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? 'end' : 'center';
                    },
                    color: function(context) {
                        var value = context.dataset.data[context.dataIndex];
                        return value.x < 50 ? 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: [{
                    ticks: {
                        min: 50, // Controls where axis starts
                        max: 120 // Controls where axis finishes
                    },
                    gridLines: {
                        display: false,
                        lineWidth: 3 // Width of bottom line
                    }
                }]
            }
        }



    });

</script>

Answer 2

如果您只想更改标签，则有一个更简单的解决方案。 来自 chartjs-plugin-datalabels 的文档：

数据值转换为字符串 ( '' + value )。 如果 value 是一个对象，则首先应用以下规则：

value = value.label如果已定义且不为空

else value = value.r如果已定义且不为空

else value = 'key[0]: value[key[0]], key[1]: value[key[1]], ...'

因此，在您的数据点中指定一个label就足够了：

 data: [{ x: 78.7, y: 0, r: 10, name: "Performance", label: `${Math.round(x)}` }],