Добавление массива объекта в ChartJS

Как добавить массив объектов в chartjs. Контроллер этого представления отправляет в шаблон twig массив объектов.Так, как я это делаю, не отображаются значения месяца и imp.В атрибуте labels я хочу поместить массив месяцев, а в атрибуте data массив imp .Пожалуйста, у вас есть идеи об этом? Контроллер: 

     /**
 * @Route("/cg1", name="cg1")
 * @Method({"GET", "POST"})
 */
public function cg1Action(Request $request)
{
    $conn=$this->get('database_connection');
    $consulta="SELECT SUM(consumo_combustible.importe) as imp, MONTH(consumo_combustible.fecha) as mes FROM consumo_combustible WHERE YEAR(consumo_combustible.fecha)=2018 GROUP BY consumo_combustible.fecha";
    $sql=$conn->fetchAll($consulta);
    $jsonResponse = json_encode($sql);

    echo($jsonResponse);
    return $this->render('default/consultag1.html.twig',array(
        'respuesta' => $jsonResponse

    ));
}

шаблон Twig, JS-код

         var  valormes=[];
         var valorimp=[];                      

         $.ajax({
             url: 'http://localhost/PECNEA/web/app_dev.php/cg1', //Tu archivo donde estará tu consulta
             type: 'POST',
             dataType: 'json',
         })
             .done(function(respuesta) {
                 for (var i = 0; i < respuesta.results.length - 1; i++) {
                     var items = console.log(respuesta.results[i]);

                     valormes.push(items.mes)
                     valorimp.push(items.imp)

                 }


             })
             .fail(function() {
                 console.log("Error al cargar el arreglo");
             });

var areaChartData = {

  labels  :  valormes,
  datasets: [
    {
      label               : '2018',
      fillColor           : 'rgba(210, 214, 222, 1)',
      strokeColor         : 'rgba(210, 214, 222, 1)',
      pointColor          : 'rgba(210, 214, 222, 1)',
      pointStrokeColor    : '#c1c7d1',
      pointHighlightFill  : '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      data                : valorimp
    }

  ]
}
Author: Barbara Ross Veitia, 2019-04-23
Source

2 answers

Для labels и data chart.js стоят только array[value]. Вы должны извлечь эту информацию , чтобы загрузить ее в конфигурацию chart.

let arrmes = cg.map(mes => cg.mes);
let arrimp = cg.map(mes => cg.imp);

var areaChartData = {

  labels  : {{arrmes}}
  datasets: [
    {
      label               : '2018',
      fillColor           : 'rgba(210, 214, 222, 1)',
      strokeColor         : 'rgba(210, 214, 222, 1)',
      pointColor          : 'rgba(210, 214, 222, 1)',
      pointStrokeColor    : '#c1c7d1',
      pointHighlightFill  : '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      data                : {{arrimp}}
    }

  ]
}
 0
Author: farsSharp, 2019-04-25 17:58:34

Так же просто, как это, переменная результата внутри кода js я получаю его с var arr= JSON.parse ('{{результат / raw }}'); Демонстрация кода js: 

  var valormes=[];
  var valorimp=[];  
  // Estructura que tiene el arreglo a través de la variable resultado que envía el controlador a la vista twig 
  //arr= [{"imp":"3000","mes":"2"},{"imp":"830","mes":"3"},{"imp":"1900","mes":"4"}];

  var arr= JSON.parse('{{ resultado|raw }}');

  for(var i=0; i< arr.length; i++){
       valormes[i]=arr[i].mes;
       valorimp[i]=arr[i].imp;
  }

   console.log(valormes);

   console.log(valorimp);



var areaChartData = {

  labels  :  valormes,
  datasets: [
    {
      label               : '2018',
      fillColor           : 'rgba(210, 214, 222, 1)',
      strokeColor         : 'rgba(210, 214, 222, 1)',
      pointColor          : 'rgba(210, 214, 222, 1)',
      pointStrokeColor    : '#c1c7d1',
      pointHighlightFill  : '#fff',
      pointHighlightStroke: 'rgba(220,220,220,1)',
      data                : valorimp
    }

  ]
}
 0
Author: Barbara Ross Veitia, 2019-04-29 14:49:04