Wo können die benutzerdefinierten Attribute in Flot-Tortendiagramm js hinzugefügt und registriert werden?

Question

Obwohl diese Frage hat Antwort auf: Adding custom attributes to flot data

aber ich habe jeden möglichen Weg versucht, aber meine benutzerdefinierten Attribute werden nicht auf Klickereignis angezeigt.

Bisher habe ich versucht, dies:

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); 
}); 

Das Problem ist: wenn ich das Kreissegment klicken möchte ich aufmerksam machen "location_value"

aber ich bekomme [Object Object]

Answer 1

Ich sehe zwei Probleme mit dem Code, wie es jetzt ist. Erstens ist das JSON-Objekt audit_status nicht richtig definiert. Die location_value Eigenschaften müssen Doppelpunkte verwenden, nicht Gleichheitszeichen:

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

Zweitens in Ihrer plotclick Funktion, die zusätzlichen Eigenschaften in Ihrem Datenobjekt definiert haben es nicht in den Rückruf übergeben an die Serie Objekt machen über. Sie müssen auf das ursprüngliche Datenobjekt verweisen, indem Sie den für den Rückruf bereitgestellten Code obj.seriesIndex verwenden. This JSFiddle enthält ein Beispiel für den folgenden Code.

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); 
    } 
});