Добавить текст в кольцевую диаграмму - ChartJS

Question

У меня есть диаграммы

<div class="col-xs-2"><canvas id="device"></canvas></div>
<div class="col-xs-2"><canvas id="host_name"></canvas></div>
<div class="col-xs-2"><canvas id="city"></canvas></div>
<div class="col-xs-2"><canvas id="org"></canvas></div>
<div class="col-xs-2"><canvas id="country"></canvas></div>
<div class="col-xs-2"><canvas id="region"></canvas></div>

---

CSS

<style type="text/css">
    .chart-inner {
        margin-top: -100px;
        margin-bottom: 100px;
    }
    .chart-inner h5 {
        margin-bottom: 5px;
        margin-top: 27px;
        font-size: 200px;
        color: red;
    }

</style>

---

Я пробовалдобавить текст к центру

$('canvas#' + selector).append('<div class="chart-inner"><h5>' + selector + '</h5></div>');

Кажется, он не прошел.

---

Но когда я прячусь (), это работает. Все графики скрыты.

$('canvas#' + selector).hide();

Чего мне не хватает?

---

Обновлено

<script>

    function renderChart(selector, chartType, colors, labels, values, chartLine ) {


        let chart = document.getElementById(selector).getContext('2d');

        new Chart(chart, {
            type:chartType, // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data:{
                labels:labels,
                datasets:[{
                    data:values,
                    // backgroundColor:colors,
                    backgroundColor:colors,
                    borderWidth:1,
                    borderColor:'white',
                    hoverBorderWidth:2,
                    hoverBorderColor:colors,
                    hoverBorderWidth: 2,
                    borderAlign: 'inner',
                }]
            },
            options:{
                title:{
                    display:true,
                    text:selector
                },
                legend:{
                    display:false,
                    position:'right',
                    labels:{
                        fontColor:'#000'
                    }
                },
                cutoutPercentage: 70,
                animation:{
                    animateScale:true,
                },
            }
        });


        // $('canvas#' + selector).append('<div class="chart-inner"><h5>' + selector + '</h5></div>');
        // $('canvas#' + selector).hide();
        //$('canvas#device').append('<div class="chart-inner"><h5>1234</h5></div>');
    }

    /*=========================================
    =            deviceType            =
    =========================================*/

    var ajax = $.ajax({url: '/visitor/summary/device'});
    ajax.done(function (response) {

        deviceTypeLabels = [];
        deviceTypeValues = [];

        $.each(response, function(key,val) {
            deviceTypeLabels.push(key);
            deviceTypeValues.push(val);
        });

        renderChart('device', 'doughnut', colors, deviceTypeLabels, deviceTypeValues );

    });

    ... and more charts ...  


</script>

Answer 1

Я пытался добавить текст в центр

Вы добавляете элементы внутри тега canvas. Это отображается как запасной вариант, когда в вашем браузере отсутствует поддержка canvas .

. Вам нужно использовать метод canvas getContext.

Jsfiddleпример

Адаптированный к тому, что вы предоставили, он будет выглядеть примерно так:

var centerX = chart.width / 2;
var centerY = chart.height / 2;

chart.fillStyle = 'black';
chart.font = '200px';
chart.textAlign = 'center';
chart.fillText(selector, centerX, centerY);

Возможно, вам потребуется сместить centerX или centerY в зависимости от ширины ваших кольцевых диаграмм. рассчитывается.