2016-11-09 3 views
0

У меня есть полностью функциональный Chart.JS Barchart, который загружается по назначению, однако я хотел бы добавить имя пользователя в каждый связанный с ними бар, чтобы администраторы (которые могли видеть все записи) могли различать их.Можно ли добавить отдельные ярлыки в Chart.JS?

function BarChart(data) { 
       var barChartData = { 
        labels: data.Month, 
        datasets: [ 
         { 
          label: 'Weight (kg)', 
          fillColor: "rgba(220,220,220,0.5)", 
          backgroundColor: "rgba(46, 44, 211, 0.7)", 
          highlightFill: "rgba(220,220,220,0.75)", 
          highlightStroke: "rgba(220,220,220,1)", 
          data: data.Weight 
         }, 
         { 
          label: 'Steps', 
          fillColor: "rgba(0,0,0,0.5)", 
          backgroundColor: "rgba(215, 44, 44, 0.7)", 
          highlightFill: "rgba(0,0,0,0.5)", 
          highlightStroke: "rgba(0,0,0,0.5)", 
          data: data.Steps 
         } 
        ] 

       } 
       var ctx = document.getElementById("barchart").getContext("2d"); 
       window.myBar =new Chart(ctx, { 
        type: 'bar', 
        data: barChartData, 
        options: { responsive: true } 
       }); 

Я успешно прошел через логины и они могут быть вызваны с помощью data.User, однако, когда я добавляю это к пошаговым или этикетке веса, я в конечном итоге с «Шаги для: администратор, администратор, администратор "(так как у меня три записи, все от администратора).

Возможно ли, чтобы у каждого бара было имя пользователя, которому оно принадлежит?

+0

Используйте Highcharts если вы можете, может сделать все. – mybirthname

+0

Я бы предпочел использовать решение с открытым исходным кодом, вы бы порекомендовали что-нибудь еще? Проблема с выбором другого варианта на этом этапе заключается в том, что мне просто удалось получить диаграмму, работающую красиво (кроме части имени пользователя). – bmo

+0

Chart.js работает достаточно хорошо, но у них ограниченные возможности. Я не помню, если у них есть эта функция для именования, то, что я помню, ее нельзя сравнивать с высокими диаграммами. Если данные не защищены, поэтому api может быть в сети, вы также можете проверить графики Google, они бесплатны. – mybirthname

ответ

0

Возможно, не совсем то, что вы просили, но вы можете добавить его в всплывающую подсказку.

options: { 
    tooltips:{ 
    callbacks: { 
     afterLabel: function(e){return "added By:" +data.User[e.datasetIndex][e.index]} 
    } 
    } 
} 

https://jsfiddle.net/r71no58a/7/

+0

Выглядит хорошо, я попробую! – bmo

+0

Так мне удалось заставить его работать, используя некоторые из логики вы предусмотрели: опции: { реагирующих: истинная, подсказки: { обратных вызовов: { afterLabel: функция (е) {возвращение «Владелец:» + data.User [e.index]} } } } Спасибо! – bmo

Смежные вопросы