Question

此代码可以在单个图表上正常工作，但在我的情况下，7s中有7个图表。图表可以正确显示，但图表的中间值会被值覆盖。

这是我的js。

var DrawChart = function(divId,present) {
    var value = present;
    var data = {
        labels: ["Present", ""],
        datasets: [{
            data: [value, 100-value],
            backgroundColor: ["#FF6384", "#AAAAAA"],
            hoverBackgroundColor: ["#FF6384", "#AAAAAA"],
            hoverBorderColor: ["#FF6384", "#ffffff"]
        }]
    };
    var myChart = new Chart(document.getElementById(divId), {
        type: 'doughnut',
        data: data,
        options: {
            responsive: true,
            legend: {
                display: false
            },
            cutoutPercentage: 80,
            tooltips: {
                filter: function(item, data) {
                    var label = data.labels[item.index];
                    if (label) return item;
                }
            }
        }
    });

    textCenter(value);

    function textCenter(val) {
        Chart.pluginService.register({
            beforeDraw: function(chart) {
                var width = chart.chart.width,
                height = chart.chart.height,
                ctx = chart.chart.ctx;
                ctx.restore();
                var fontSize = (height / 114).toFixed(2);
                ctx.font = fontSize + "em sans-serif";
                ctx.textBaseline = "middle";
                var text = val+"%",
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 2;
                ctx.fillText(text, textX, textY);`<br>
                ctx.save();`<br>
            }
        });
    }
}

这是查看文件。

<div class="row">
    <? for($i = 0;$i < count($model->siteWisePresentAbsent);$i++):?>
        <canvas style="height: 150px; width: 50%; display:inline-block" id="div<?php echo $i; ?>"></canvas>
    <? endfor;?>
</div>

这就是我调用js的方式。

<?
    for($i = 0;$i < count($model->siteWisePresentAbsent);$i++){
        echo "DrawChart('div".$i."','".$model->siteWisePresentAbsent[$i]['pres']."');";
    }
?>

这是脚本链接。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script>

如何创建多个单值甜甜圈图

0 个答案: