Hinzufügen zusätzlicher Eigenschaften zu einem Chart JS-Dataset

Question

Ich versuche, einem Chart JS-Dataset (für ein Kreisdiagramm) zusätzliche Eigenschaften hinzuzufügen. Ich habe ein Stück von Ruby auf dem Back-End bekommt, den die folgende JSON zur Ansicht druckt:

[ 
{"segment": "undetermined", 
"label": "Undetermined", 
"value": 420193," 
color": "#DECF3F", 
"highlight": "#e2d455" 
}, 
{"segment":"peer_review", 
"label":"Peer Review", 
"value":415212, 
"color":"#60BD68", 
"highlight":"#72c479" 
} 
] 

Die „Segment“ Eigenschaft ist ein zusätzlicher ein (von der Bibliothek nicht vorgesehen), die ich mag stelle ich meinem JS im Frontend zur Verfügung. Wenn ich diesen JSON jedoch in ein canvas-Tag verpacke, kann ich nicht über JS darauf zugreifen.

Die zweite Zeile unten gibt die oben JSON:

<canvas id="review-type" height="235" data-facet="review_status_s"> 
    <%= @by_review_type %> 
</canvas> 

Und ich versuche, das "Segment" Eigenschaft zuzugreifen, indem die getSegmentsAtEvent() API-Aufruf (Name Kollision versehentliche) mit:

$("#review-type").click(
    function(evt) { 
     var activePoints = reviewChart.getSegmentsAtEvent(evt); 

     /* extract other properties, then build an URL from them: */ 

     var url = "/" +locale+ "/catalog?f[" +facet_frag+ "][]=" +segment+ "&q=*:*"; 
     window.location = url; 
    } 
); 

Wenn ich jedoch in der JS-Konsole activePoints inspiziere, ist "Segment" nicht in der Liste der Eigenschaften.

Was soll ich tun? Vielen Dank.

Answer 1

getSegmentsAtEvent (und seine Entsprechungen für andere Diagrammtypen) gibt Diagrammelemente (Sektoren, Punkte, Balken usw.) zurück. Sie müssen eine der Eigenschaften des Diagrammelements und des Datenobjekts verwenden, um den Index herauszufinden und dann die gewünschte zusätzliche Eigenschaft zu erhalten.

Zum Beispiel, wenn pieData Objekt Ihrer Daten sind

$("#review-type").click(
    function (evt) { 
     var activePoints = reviewChart.getSegmentsAtEvent(evt); 

     if (activePoints.length) 
     alert(pieData.filter(function (e) { return e.label === activePoints[0].label; })[0].segment); 
      ... 

Sie auch zusätzliche Eigenschaften auf den Eigenschaften einstellen könnten, die von dem Objekt auf das Element übertragen zu bekommen (z label), aber das ist ein bisschen hacky.

---

Fiddle - http://jsfiddle.net/nm9ay728/