如何将对象数组添加到chartjs？答案

【问题标题】：How to add an array of objects to chartjs?如何将对象数组添加到chartjs？
【发布时间】：2019-04-24 16:11:16
【问题描述】：

如何将对象数组添加到 chartjs。该视图的控制器通过变量 {{cg}} 向模板树枝发送数组。我这样做的方式是我得到一个错误，我正在经历的是一个数组数组。在标签属性中，我想放置月份的排列，并在属性数据中放置 imp 的修复。请问对此有什么想法吗？控制器：

/** Controller
 * @Route("/cg1", name="cg1")
 */
public function cg1Action()
{
    $conn=$this->get('database_connection');
    $consulta="SELECT consumo_combustible.importe as imp,MONTH(consumo_combustible.fecha) as mes FROM consumo_combustible WHERE YEAR(consumo_combustible.fecha)=2018";
    $sql=$conn->fetchAll($consulta);      
    return $this->render('default/consultag1.html.twig', array('cg' => $sql));
}

//------------- //- 面积图 - //---------------

         // Get context with jQuery - using jQuery's .get() method.
         var areaChartCanvas = $('#areaChart').get(0).getContext('2d')
         // This will get the first returned node in the jQuery collection.
         var areaChart       = new Chart(areaChartCanvas)
         var datames = []
         datames={{ cg.mes }} ;
         var dataimp = [] ;

         dataimp={{ cg.imp }} ;
         var areaChartData = {
             labels  : datames,
             datasets: [
                 {
                     label               : 'Electronics',
                     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                :  dataimp
                 },
                 {
                     label               : 'Digital Goods',
                     fillColor           : 'rgba(60,141,188,0.9)',
                     strokeColor         : 'rgba(60,141,188,0.8)',
                     pointColor          : '#3b8bba',
                     pointStrokeColor    : 'rgba(60,141,188,1)',
                     pointHighlightFill  : '#fff',
                     pointHighlightStroke: 'rgba(60,141,188,1)',
                     data                :  dataimp
                 }
             ]
         }

抛出以下错误：

在第 55 行的 default\consultag1.html.twig 中不存在键为“0、1、2、3、4、5”的数组的键“mes”

【问题讨论】：

标签： javascript sql arrays

【解决方案1】：

这是解决方案，通过原始函数 {{result | raw}}，我得到了控制器发送给视图的值并准备好了

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

  //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
    }

  ]
}

 /**
 * @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

    ));
}

【讨论】：