Chartjs этикетки с Javascript массиву

Question

У меня есть Chart.js со значениями из массива Javascript, который выглядит точно так же, что:

var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}'); 

И здесь я даю «Obj» массив к chartjs, который работает отлично и заливок из баров:

var barChartData = { 
     labels : obj1, 

     datasets : [ 
      { 
       fillColor: "rgba(151,187,205,0.5)", 
      strokeColor: "rgba(151,187,205,0.8)", 
      highlightFill: "rgba(151,187,205,0.75)", 
      highlightStroke: "rgba(151,187,205,1)", 
       data : obj 

      } 
     ] 

    } 
    window.onload = function(){ 
     var ctx = document.getElementById("canvas").getContext("2d"); 
     window.myBar = new Chart(ctx).Bar(barChartData, { 
      responsive : true 
     }); 
    } 

    </script> 

Но как вы можете видеть, что есть второй массив называется «obj1», который хранит имена меток. Это выглядит так:

var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}'); 

Этот второй массив не заполняет метки, подобные другому массиву, метки по-прежнему пусты. Я понятия не имею, почему это не работает, как данные: «».

Answer 1

Это похоже на работу:

function convertToArray(obj) { 
 
    return Object.keys(obj).map(function(key) { 
 
     return obj[key]; 
 
    }); 
 
} 
 

 
var obj = JSON.parse('{"0":"8.4113","2":"9.5231","3":"9.0655","4":"7.8400"}'); 
 
var obj1 = JSON.parse('{"0":"name1","2":"name2","3":"name3","4":"name4"}'); 
 

 
obj = convertToArray(obj); 
 
obj1 = convertToArray(obj1); 
 

 
var barChartData = { 
 
    labels : obj1, 
 
    datasets : [ 
 
     { 
 
      fillColor: "rgba(151,187,205,0.5)", 
 
      strokeColor: "rgba(151,187,205,0.8)", 
 
      highlightFill: "rgba(151,187,205,0.75)", 
 
      highlightStroke: "rgba(151,187,205,1)", 
 
      data : obj 
 

 
     } 
 
    ] 
 
}; 
 
var ctx = document.getElementById("canvas").getContext("2d"); 
 
window.myBar = new Chart(ctx).Bar(barChartData, { 
 
    responsive : true 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script> 
 
<canvas id="canvas"></canvas>

Object.keys(obj) возвращает массив свойств объекта, а затем мы используем функцию Array#map(), чтобы преобразовать эти ключи к реальным значениям. Затем Array#map() возвращает новый массив, содержащий только значения.