Chart.js-datalabels-плагины не работают

Я пытаюсь использовать chartjs-datalabels-plugin для отображения значений на диаграмме. но я не могу заставить его работать на jsfiddle

Вот мой код

<div class = "graph">
  <div class = "chart-legend">

  </div>
  <div class = "chart">
    <canvas id = "myChart" height = 60></canvas>
  </div>
</div>

Я импортирую chartjs-datalabels-plugin в jsfiddle, а затем в опциях устанавливаю для параметра отображения значение true. но на диаграмме значение не отображается.

var ctx = $('#myChart');

ctx.height(100);
var myChart = new Chart(ctx, {
    ....
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
                        color: 'black',
                        display: true,
                        font: {
                            weight: 'bold'
                        },
                        formatter: Math.round
                    }
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

javascript html chart.js

18.03.2018 10:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

4 503

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Плагин Datalabels требует Chart.js 2.7.0 или новее.

В своей скрипке вы использовали версию 2.4.0.

var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        height: 200,
        labels: ["Red"],
        datasets: [{
                label: '# of Votes',
                data: [12],
                backgroundColor: [
                    '#F4B266',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            },
            {
                label: '# of Votes',
                data: [18],
                backgroundColor: [
                    '#AEB7B2',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            }
        ]
    },
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
						color: 'black',
						display: function(context) {
							return context.dataset.data[context.dataIndex] > 15;
						},
						font: {
							weight: 'bold'
						},
						formatter: Math.round
					}
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

<script src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-plugin-datalabels.min.js"></script>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "graph">
  <div class = "chart-legend">
  </div>
  <div class = "chart">
    <canvas id = "myChart" height = 60></canvas>
  </div>
</div>

19.03.2018 12:11

Другие вопросы по теме

Переключить таймер между RUN и RESET JS

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

Как отобразить выбранную опцию из выпадающего списка?

Angular 4 ngx-popover - [popoverCloseOnMouseOutside] = "true" не закрывает всплывающее окно, когда мышь берется за пределы всплывающего окна

Как настроить плавающий div так, чтобы он располагался вверху справа

-webkit-background-clip: текст; не работает

Пользовательский круглый флажок в всплывающем окне Bootstrap

Селекторы CSS внутри ul li

Как перенаправить с домашней страницы по умолчанию на страницу индекса?

Как добавить еще один атрибут HTML onclick внутри другого атрибута

Chart.js-datalabels-плагины не работают

Ответы 1

Другие вопросы по теме

Похожие вопросы