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

Posted 2023-03-23

【中文标题】如何将对象数组添加到chartjs？

【英文标题】：How to add an array of objects to 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”

【参考方案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

    ));