Вывод надписи на столбике Chart js

129

22 августа 2019, 13:50

Все привет, в первые сталкиваюсь с Chart Js и сразу же встал в тупик. Требуется вывести данные из базы данных mysql сделать подсчеты в php и вывести график, все сделано по плану и работает на отлично за исключением одного. Не могу разобраться как вывести к примеру переменную $comanda1f в само тело столбца, что бы цифры наглядно демонстрировали разницу в показателях. Сам код

<div style="position:absolute; top:800px; left:10px; width:900px; height:600px;"> 
<canvas id="myChart" width="800" height="500"></canvas> 
<script> 
 
var ctx = document.getElementById("myChart").getContext('2d'); 
var myChart = new Chart(ctx, { 
    type: 'bar', 
    data: { 
        labels: ["Команда А", "Команда М", "Команда Я", "Команда К"], 
        datasets: [{ 
            label: 'Рейтинг бригады', 
            data: [  <?php echo $comanda1f; ?>,<?php echo $comanda2f ?>,<?php echo $comanda3f ?>,<?php echo $comanda4f ?>], 
            backgroundColor: [ 
                'rgba(255, 0, 0, 1)', 
                'rgba(10, 207, 0, 1)', 
                'rgba(55, 20, 176, 1)', 
                'rgba(255, 210, 0, 1)', 
  
            ], 
            borderColor: [ 
                'rgba(255, 0, 0, 1)', 
                'rgba(10, 207, 0, 1)', 
                'rgba(55, 20, 176, 1)', 
                'rgba(255, 210, 0, 1)', 
 
            ], 
            borderWidth: 3 
        }] 
		 
    }, 
 
    options: { 
		 legend: { 
      display: false 
    }, 
scales: { 
    xAxes: [{ 
        stacked: false, 
        beginAtZero: true, 
        scaleLabel: { 
            labelString: 'Month' 
        }, 
        ticks: { 
            stepSize: 1, 
            min: 0, 
            autoSkip: false 
        } 
    }] 
} 
    } 
}); 
</script>

Answer 1

Пример взят отсюда. Вас интересует метод onAnimationComplete.

ctx.fillText(text, x, y) - создает текст в координатах x, y. Проходим по всем точкам и создаем для каждой текст.

Так же там упоминается плагин для chart.js.

var chartData = { 
    labels: ["January", "February", "March", "April", "May", "June"], 
    datasets: [ 
        { 
            fillColor: "#79D1CF", 
            strokeColor: "#79D1CF", 
            data: [60, 80, 81, 56, 55, 40] 
        } 
    ] 
}; 
 
var ctx = document.getElementById("myChart2").getContext("2d"); 
var myBar = new Chart(ctx).Bar(chartData, { 
    showTooltips: false, 
    onAnimationComplete: function () { 
        var ctx = this.chart.ctx; 
        ctx.font = this.scale.font; 
        ctx.fillStyle = this.scale.textColor 
        ctx.textAlign = "center"; 
        ctx.textBaseline = "bottom"; 
        this.datasets.forEach(function (dataset) { 
            dataset.bars.forEach(function (bar) { 
                ctx.fillText(bar.value, bar.x, bar.y + 20); 
            }); 
        }) 
    } 
});

<script src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script> 
    <canvas id="myChart2" height="300" width="500"></canvas>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Бордер в процентах

Пытаюсь понять, как сделать такой бордер

124

javascript

Задержка внутри двойного цикла

Привет у меня такой код

130

MySQL

Помогите с группировкой в запросе

Нужно получить промежутки времени работы менеджеров, 15 минут бездействия считать за перерывИ группировать их по менеджерам

103

HTML

Дизайн кнопки с помощью СSS

Подскажите пожалуйста, как можно сделать такой дизайн кнопки с помощью CSS или только можно с наложением background?

121