2016-04-19 3 views
1

Я пытаюсь добавить дополнительные свойства в набор данных диаграммы JS (для диаграммы пирога/пончика). У меня есть кусок Руби на заднем конце, который печатает следующий JSON к виду:Добавление дополнительных свойств в диаграмму JS dataset

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

Свойство «сегмент» дополнительный один (не предусмотрено в библиотеке), что я хочу сделать доступным для моего JS на интерфейсе. Однако, когда я переношу этот JSON в тег canvas, я не могу получить к нему доступ через JS.

Вторая строка ниже выводит выше JSON:

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

И я пытаюсь получить доступ к свойству «сегмента» с помощью вызова API getSegmentsAtEvent() (имя столкновения случайны):

$("#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; 
    } 
); 

Однако, когда я проверяю activePoints в консоли JS, «сегмент» отсутствует в списке свойств.

Что мне делать? Благодарю.

ответ

1

getSegmentsAtEvent (и его эквиваленты для других типов диаграмм) элементы элементов возврата (сектора, точки, столбцы и т. Д.). Вы должны использовать любые свойства элемента диаграммы и объект данных для определения индекса, а затем использовать его для получения дополнительного свойства, которое вы хотите.

Например, если pieData ваши данные объекта

$("#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); 
      ... 

Вы можете также задать дополнительные свойства на свойства, которые получают переданные от объекта к элементу (например label), но это немного Hacky.


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