Добавить метку к точке пузырькового графика (Chart.js)

Question

Добавить метку к точке пузырькового графика (Chart.js)

1

Мне трудно добавить ярлык к точкам на моем графике пузырьков.

Я пытаюсь назначить тот же ярлык, что и легенда для каждого из моих наборов данных.

Я попытался присвоить эти точки метке, но я, кажется, только могу ее отобразить.

Я хотел бы отобразить значение точки выше и пользовательскую метку ниже точки (как на втором изображении ниже).

Какой мой текущий прогресс

То, что я пытаюсь сделать

Вот код моего прогресса на графике.

<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>

Я ценю любую помощь или предложения ^ _ ^

Josh Gomes 05 фев. 2018, в 15:24

Источник

Теги:

javascript

chart.js

bubble-chart

chart.js2

1 ответ

Ещё вопросы

beaver · Accepted Answer · 2018-02-05T13-38-00.000Z

Измените конфигурацию плагина 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
    }

Форматировщик также имеет параметр context который содержит информацию о наборе данных, подобном метке.

Вот скрипка: https://jsfiddle.net/beaver71/3ed8t6pe/

Это сработало отлично! Вы знаете, как я мог бы выровнять это ниже?
Подождите, разобрались, вы можете установить его на «начало»: «центр»; под настройками якоря и выравнивания