javascript - 将文本添加到圆环图 - 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

I've tried to append text to the center

您正在 canvas 标记内附加元素。 That's only displayed as a fallback when your browser lacks canvas support .

您正在寻找的是使用 canvas getContext 方法。

Jsfiddle example

根据您提供的内容进行调整，它会是这样的:

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，具体取决于圆环图宽度的计算方式。