向Donut Chart添加文本-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>');

似乎没有实现。

---

但是当我hide（）时，它起作用了。所有图表都被隐藏。

$('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

我尝试将文本附加到中间