Question

想问一些与javascript有关的内容。我有一个html模板和一个按钮（b1），其中onclick它将为变量tempdata分配一个数组。当我尝试在.onclick函数之外做警报（tempdata）时，没有任何反应（我尝试在onclick函数内做警报（tempdata），但它可以工作）。但是，我需要在onclick函数之外使用变量tempdata的原因是因为我需要将tempdata数组传递给var config变量的数据标记

所以我的问题是如何设置tempdata数组并将其传递给数据标记？

var cusomernames=[];

var myObj = [{
"region":"APAC",
"customers": [
    { "name":"A", "count":100 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
},
{
"region":"ASEAN",
"customers": [
    { "name":"A", "count":30 },
    { "name":"B", "count":35 },
    { "name":"C", "count":90 }
]
}

];


function myFunction() {
    var datasum=[];  
    for(var i = 0; i < myObj.length; i++) {
        if(myObj[i].region == "APAC"){
            for(var p=0;p<3;p++){
                datasum.push(myObj[i].customers[p].count);
                cusomernames.push(myObj[i].customers[p].name);
            }
        }

    }

    return datasum;        

}



window.onload = function() {
    var b1=document.getElementById('b1');
    var tempData=[];
    b1.onclick=function(){  
        tempData=myFunction();
        alert(tempData);
    }

    var config = {
        type: 'funnel',
        data: {
            datasets: [{
                data: tempData,
                backgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ],
                hoverBackgroundColor: [
                    "#FF6384",
                    "#36A2EB",
                    "#FFCE56"
                ]
            }],
            labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config);



};

Answer 1

您是否可以直接设置配置属性而不使用临时变量？

//....
var config = {...}
window.onload = function () {
    b1.onclick(function () {
        config.datasets[0].data = myFunction();
    });
    //Chart stuff
}

Answer 2

尝试：

tempData.push(myFunction());

而不是：

tempData=myFunction();

编辑：我认为上述两种方法都可以正常工作，我认为这是一个时间问题。我认为你需要将config放在事件监听器的范围内。像：

b1.onclick=function(){  
    tempData=myFunction();
    alert(tempData);

    var config = {
        type: 'funnel',
        data: {
        datasets: [{
            data: tempData,
            backgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
            ],
            hoverBackgroundColor: [
                "#FF6384",
                "#36A2EB",
                "#FFCE56"
                ]
            }],
           labels: ["A","B","C"]
        },
        options: {
            responsive: true,
            sort: 'desc',
            legend: {
                position: 'top'
            },
            title: {
                display: true,
                text: 'Chart.js Funnel Chart'
            },
            animation: {
                animateScale: true,
                animateRotate: true
           }
        }
    }; 
 }

单击Javascript按钮为全局变量赋值

2 个答案: