javascript - 在flot-pie图表js中哪里添加和注册自定义属性？

Question

虽然这个问题有答案:Adding custom attributes to flot data

但我已尝试了所有可能的方法，但我的自定义属性未在点击事件上显示。

到目前为止我尝试过这个:

html:

<div id="audit_status" class="chart"></div>

JS:

var audit_status = [
    {label: "Pending", data: 2, location_value="Majiwada,Pune"},
    { label: "Ongoing", data: 1 location_value="Mumbai"},
];

var options = {
    series: {
        pie: {
            show: true,
            label: {
                show: true,
                radius: 120,
                formatter: function (label, series) {
                    return '<div style="border:1px solid grey;font-size:8pt;text-align:center;padding:5px;color:white;background-color: #90bdce;">' +
                        label + ' : ' +
                        series.data[0][1] +
                        ' ('+Math.round(series.percent)+' %)</div>';

                },
                background: {
                    opacity: 0.8,
                    color: '#000'
                }
            }
        }
    },
    legend: {
        show: true
    },
    grid: {
        hoverable: true,
        clickable: true
    }

};

$("#audit_status").bind("plotclick", function(event, pos, obj) {
    console.log(obj);

    //alert(obj.series.value);
    if (obj) {
        alert(obj.series.location_value);
    }
});

$(document).ready(function () {
    $.plot($("#audit_status"), audit_status, options);
});

问题是:每当我点击饼图部分时，我想提醒“location_value”

但是我得到了[Object Object]

Answer 1

我发现现在的代码有两个问题。首先，audit_status JSON 对象的定义不完全正确。 location_value 属性需要使用冒号，而不是等号:

var audit_status = [
    { label: "Pending", data: 2, location_value: "Majiwada,Pune" },
    { label: "Ongoing", data: 1, location_value: "Mumbai" }
];

其次，在 plotclick 函数中，数据对象中定义的额外属性不会传递到传递到回调中的系列对象。您需要使用提供给回调的 obj.seriesIndex 来引用原始数据对象。 This JSFiddle下面提供了代码示例。

var data = [{
    label: "Yes",
    data: 50,
    location_value: 'Majiwada,Pune'
}, {
    label: "No",
    data: 150,
    location_value: 'Mumbai'
}];

// plot initialization code here

$("#pie").bind("plotclick", function(event, pos, obj) {
    if (obj) {
        // use the obj.seriesIndex to grab the original data object,
        // then you can use any property you defined on that object
        alert(data[obj.seriesIndex].location_value);
    }
});