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>');

它似乎没有通过。

---

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

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

标签： javascriptjqueryhtmlcsschart.js

Answer 1

我试图将文本附加到中心

您在canvas标签内附加元素。仅当您的浏览器缺少画布支持时，它才会显示为后备。

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

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。