Question

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

我想做什么

我希望在我的'气泡'上方/中添加数据标签，其中包含我的值。就像你在每个气泡上看到的'10'一样。

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

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

我已经安装了帖子建议的the plugin，但它显示的数据标签是针对气泡的半径而我希望它是气泡的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 的 docs：

<块引用>

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

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

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

其他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)}` }],

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

2 个答案: