將數據標簽添加到 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)}` }],