jQuery饼图代码嵌入其他jQuery函数后无法运行该如何解决？

核心问题原因 #

• donutpie插件调用顺序错误，重复初始化覆盖了已传入的数据：原代码中先无参初始化插件、再更新饼图数据、最后又传入配置二次初始化，最后一步的初始化操作会清空之前传入的饼图数据，直接导致渲染失效。
• 嵌套在其他jQuery函数中运行时，sedansPercentage、SUVsPercentage两个计算值还没有通过Ajax请求完成赋值，值为undefined，会触发插件报错停止运行。
• 原代码中百分比变量未加变量声明关键字，会意外污染全局作用域，也可能引发不可预期的变量冲突。

修复方法 #

1. 调整插件调用逻辑，不要重复初始化：可以先初始化插件并传入配置，再调用update方法传入数据，也可以直接在初始化时同步传入配置和数据。
2. 将饼图渲染逻辑封装为独立函数，只有在Ajax请求完成、两个百分比值计算完毕后，再调用渲染函数传入参数执行渲染。如果需要在其他jQuery函数（比如点击事件、切换事件）中触发渲染，也要确保调用时两个百分比值已经完成计算。

修复后完整代码示例 #

$( document ).ready(function() {
    // 封装独立的饼图渲染函数，接收百分比参数
    function renderDonutPie(sedansPercent, suvPercent) {
        var data_pie = [
            {"name" : "Sedan", "hvalue" : sedansPercent, "color": "brown" },
            {"name" : "SUV", "hvalue" : suvPercent, "color": "gray" } 
        ];
        // 先初始化插件配置
        $(".exp").donutpie({
            radius: 240,
            tooltip : true,
            tooltipClass : "donut-pie-tooltip-bubble"
        });
        // 再传入数据更新饼图
        $(".exp").donutpie('update', data_pie);
    }

    $.ajax({
        url: "myurl",
        success: function(data){ 
            var json_obj = data.body;
            var sedans = 0;
            var SUVs = 0;
            
            for (var key of Object.keys(json_obj)) {
                var formatModel = json_obj[key]["vehicle_model"].split("-");
                if(formatModel[1] == "Sedan"){
                  sedans++;
                }else if(formatModel[1] == "SUV"){
                  SUVs++;
                }
            }

            var totalVehicles = sedans + SUVs;
            // 添加变量声明，避免全局污染
            var sedansPercentage = sedans * 100 / totalVehicles;
            var SUVsPercentage = SUVs * 100 / totalVehicles;

            // 数据计算完成后再调用渲染函数
            renderDonutPie(sedansPercentage, SUVsPercentage);
        },
        error: function(){
            alert("There was an error.");
        },
    });
});

内容的提问来源于stack exchange，提问作者Aldiyar