谷歌圖表餅圖事件

Question

我有以下代碼可以在我的頁面上生成幾個餅圖：

for(var question in questions){
    console.log(question);
    var curChart = $('<div class="summary-chart"></div>');
    curChart.appendTo(contentDiv);
    var data = [["answer_text", "quantity"]];
    for(var answer in questions[question]){
        data.push([answer, questions[question][answer]]);
    }
    var data = google.visualization.arrayToDataTable(data);
    chart = new google.visualization.PieChart(curChart[0]);
    google.visualization.events.addListener(chart, 'select', function(){
        alert(this.getSelection().focusNode.data); //alert slice text
    });
    chart.draw(data, {title: question, pieHole: 0.3, pieSlieceText: 'percentage', backgroundColor: '#efefef'});
}

如您所見，當我單擊切片時，它將打印該切片的文本。 我需要的是在表上設置一個 ID 並在事件內部獲取該 ID（我有alert(this.getSelection().focusNode.data) ）。

我當然可以將 id 包含在外部 div 中，例如：

var curChart = $('<div class="summary-chart" data-id="'+question+'"'></div>');

現在我只需要弄清楚如何在警報中獲取該數據。

Answer 1

防止question的值被鎖定到事件偵聽器中的最后一個值，
在閉包（函數）中分配事件

for(var question in questions) {
    if (questions.hasOwnProperty(question)) {
        drawQuestion(question);
    }
}

function drawQuestion(question) {
    var curChart = $('<div class="summary-chart"></div>');
    curChart.appendTo(contentDiv);
    var data = [["answer_text", "quantity"]];
    for(var answer in questions[question]){
        data.push([answer, questions[question][answer]]);
    }
    var data = google.visualization.arrayToDataTable(data);
    chart = new google.visualization.PieChart(curChart[0]);
    google.visualization.events.addListener(chart, 'select', function(){
        console.log(question, this.getSelection().focusNode.data);
    });
    chart.draw(data, {title: question, pieHole: 0.3, pieSlieceText: 'percentage', backgroundColor: '#efefef'});
}