javascript - javascript饼图不显示

Question

我目前正在学习 javascript，但在显示饼图时遇到问题。

我想可能是因为函数的位置_chart()。我不知道问题是什么。
饼图应该显示class = 'b-skills'在代码顶部的位置。

下面是我的一些代码。

<div class="b-skills">
   <div id="graph" class="container">
    
   </div>
</div>
    
<script src="plugins/jquery-2.2.4.min.js"></script>
<script src="plugins/jquery.appear.min.js"></script>
<script src="plugins/jquery.easypiechart.min.js"></script>
<script type="text/javascript">
<script>

var $window = $(window);

function run() {
    var fName = arguments[0],
        aArgs = Array.prototype.slice.call(arguments, 1);
    try {
        fName.apply(window, aArgs);
    } catch (err) {

    }
};

/* chart
================================================== */
function _chart() {
    $('.b-skills').appear(function () {
        setTimeout(function () {
            $('.chart').easyPieChart({
                easing: 'easeOutElastic',
                delay: 3000,
                barColor: '#369670',
                trackColor: '#fff',
                scaleColor: false,
                lineWidth: 21,
                trackWidth: 21,
                size: 250,
                lineCap: 'round',
                onStep: function (from, to, percent) {
                    this.el.children[0].innerHTML = Math.round(percent);
                }
            });
        }, 150);
    });
};


$(document).ready(function () {

    run(_chart);


});
// run the webcam image through the image model
async function predict() {
    // predict can take in an image, video or canvas html element
    var image = document.getElementById('animal-image');
    const prediction = await model.predict(image, false);

    prediction.sort(
        (a, b) => parseFloat(b.probability) - parseFloat(a.probability)
    );
    console.log(prediction[0].className);
    var resultTitle, resultExplain, resultCeleb;
    switch (prediction[0].className) {
        case 'maltiz':
            resultMessage = 'maltiz'
        default:
            resultMessage = 'try again';
    }
    var title = "<div class='" + prediction[0].className + "-animal-title'>" + resultTitle + "</div>"
    var explain = "<div class='animal-explain pt-2'>" + resultExplain + "</div>"
    var celeb = "<div class='" + prediction[0].className + "-animal-celeb pt-2 pb-2'>" + resultCeleb + "</div>"
    $('.result-message').html(title + explain + celeb);

    for (let i = 0; i < maxPredictions; i++) {
        var labelTitle;
        switch (prediction[i].className) {
            case 'maltiz':
                labelTitle = 'maltiz';
                break;
        }
        // horizontal aligning : d-flex flex-row


        if (prediction[i].probability.toFixed(2) > 0.50) {
            var showPercent = '<div class="col-xs-12 col-sm-6 col-md-3"><div class="skill-item center-block"><div class="chart-container"><div class="chart " data-percent="' + Math.round(prediction[i].probability.toFixed(2)) * 100 + '" data-bar-color="' + prediction[i].className + '"><span class="percent" data-after="%">' + prediction[i].probability.toFixed(2) * 100 + '</span></div></div><p>' + prediction[i].className + '</p></div></div>';
            graphContainer.childNodes[i].innerHTML = showPercent;
        }
    }

}             
</script>

标签： javascriptpie-chart