Question

您好，我正在寻找有关在php中使用动态数据创建测试图的帮助。

首先，我创建图的问题。

window.onload = function () {

     chart = new CanvasJS.Chart("chartContainer", {
       animationEnabled: true,
   title:{
     text: "Gasto Proyectado (neto)"
   },
   axisX: {
     interval: 1,
     intervalType: "month",
     valueFormatString: "MM/YYYY"
   },
   axisY: {
     suffix: "",
     valueFormatString: "$#,###"
   },
   toolTip: {
     shared: true
   },
   legend: {
     reversed: true,
     verticalAlign: "center",
     horizontalAlign: "right",
     cursor: "pointer",
     itemclick: toggleDataSeries
   },
       data:[

<?php

$gastoMensualProyectado = Helper::gastoMensualProyectado();
//var_dump($gastoMensualProyectado);
//die();

 $controlCostoN1= array();
 foreach ($gastoMensualProyectado as $key => $value) {
       $controlCostoN1[]= $value['name'];
 }

 $controlCostoN1 = array_unique($controlCostoN1);


$output = '';
foreach ($controlCostoN1 as $indice => $name) {


     $output .= '{
       type: "stackedColumn",
       name: "'.$name.'",
       showInLegend: true,
       xValueFormatString: "MMM, YYYY",
       yValueFormatString: "$#,###",
       dataPoints:[';

       foreach ($gastoMensualProyectado as $key => $value) {
         if ($name == $value['name']){
           $output.='{ x:'.$value['x'].', y:'.$value['y'].'},';
         }
       }
$output .=']},';
}

$output = substr($output,0,-3);

print $output;

?>
]
}]

     });
     chart.render();

然后我想放入调用php_file并以json_encode函数响应的新数据


 $dps = array();
     $i=0;
     $header = '';


     foreach ($controlCostoN1 as $indice => $name) {
       //$val[$i] = 'type: "stackedColumn",name: "'.$name.'",showInLegend: true,xValueFormatString: "MMM, YYYY",yValueFormatString: "$#,###",dataPoints:';
       //var_dump($name);
       foreach ($gastoMensualProyectado as $key => $value) {
       // echo $name;
          if ($name == $value['name']){
             $dps[][$name] = $value;
             /*
             $header .= '{
               type: "stackedColumn",
               name: "'.$name.'",
               showInLegend: true,
               yValueFormatString: "#,##0 MW",
               dataPoints: ';
               //$points[] = '{ x:'.$value['x'].', y:'.$value['y'].'},';
               //$dps[] = [ "x" => $value['x'], "y" => $value['y'] ];
               .json_encode($value, JSON_NUMERIC_CHECK).'
             },';
             */
           }
         }
       }

      // $output = substr($output,0,-3);
      echo json_encode($dps);`

然后在更改一个选择但尝试grph更改而根本没有列时尝试刷新图形中的数据。



` $('#idPresupuesto').change(function(event) {
       var dps = [];
       var names = [];
       var response;
       $.getJSON("acciones/obtenerDatosStackedColumns.json.php", { idPresupuesto: $(this).val() } ,function(data) {

          // console.log(data);
         // console.log("swasaddsaasd");
          $.each(data, function(key, value){
            // dataPoints.push({x: value[0], y: parseInt(value[1])});
            // console.log(value.first());
            // console.log(value[Object.keys(value)[0]].name);
            // value.map()
            jQuery.map( value , function( n, i){


              if(jQuery.inArray(n.name,names) < 0){
                names.push(n.name);
                //console.log(n.name);
              }




            });
         });


         $.each(data, function(key, value){
           // console.log(key);
           jQuery.map( value , function( n, i){
             // console.log(n.x + "  "+n.y);
             dps.push({x: n.x, y: parseInt(n.y)});
             // console.log();
           });
         });

          console.log(dps);
          // console.log(names);
          // console.log(names.length);

          var chart = new CanvasJS.Chart("chartContainer",{
            title:{
              text:"Presupuesto"
            },
            animationEnabled: true,
            data: [{
              dataPoints : dps,
            }]
          });

          chart.render();
       });
     });`

json响应为：


[{
    "Alimentaci\u00f3n": {
        "idOrdenCompra": 7,
        "x": "new Date(2019, 2)",
        "y": 1361340,
        "name": "Alimentaci\u00f3n"
    }
}, {
    "Alimentaci\u00f3n": {
        "idOrdenCompra": 146,
        "x": "new Date(2019, 2)",
        "y": 60000,
        "name": "Alimentaci\u00f3n"
    }
}, {
    "Equipos": {
        "idOrdenCompra": 125,
        "x": "new Date(2019, 1)",
        "y": 350500,
        "name": "Equipos"
    }
}, {
    "Equipos": {
        "idOrdenCompra": 29,
        "x": "new Date(2019, 3)",
        "y": 95014016,
        "name": "Equipos"
    }
}, {
    "Equipos": {
        "idOrdenCompra": 141,
        "x": "new Date(2019, 3)",
        "y": 2743908,
        "name": "Equipos"
    }
}, {
    "Equipos de Protecci\u00f3n Personal": {
        "idOrdenCompra": 1,
        "x": "new Date(2019, 1)",
        "y": 26179454,
        "name": "Equipos de Protecci\u00f3n Personal"
    }
}, {
    "Equipos de Protecci\u00f3n Personal": {
        "idOrdenCompra": 18,
        "x": "new Date(2019, 3)",
        "y": 8599651,
        "name": "Equipos de Protecci\u00f3n Personal"
    }
}, {
    "Equipos de Protecci\u00f3n Personal": {
        "idOrdenCompra": 84,
        "x": "new Date(2019, 3)",
        "y": 3233271,
        "name": "Equipos de Protecci\u00f3n Personal"
    }
}, {
    "Materiales": {
        "idOrdenCompra": 4,
        "x": "new Date(2019, 2)",
        "y": 12975104,
        "name": "Materiales"
    }
}, {
    "Materiales": {
        "idOrdenCompra": 14,
        "x": "new Date(2019, 2)",
        "y": 30393814,
        "name": "Materiales"
    }
}, {
    "Materiales": {
        "idOrdenCompra": 82,
        "x": "new Date(2019, 2)",
        "y": 30014590,
        "name": "Materiales"
    }
}, {
    "Saldos Gastos Generales": {
        "idOrdenCompra": 3,
        "x": "new Date(2019, 2)",
        "y": 4657962,
        "name": "Saldos Gastos Generales"
    }
}, {
    "Saldos Gastos Generales": {
        "idOrdenCompra": 16,
        "x": "new Date(2019, 3)",
        "y": 107923647,
        "name": "Saldos Gastos Generales"
    }
}, {
    "Saldos Gastos Generales": {
        "idOrdenCompra": 86,
        "x": "new Date(2019, 3)",
        "y": 80498702,
        "name": "Saldos Gastos Generales"
    }
}, {
    "Herramientas": {
        "idOrdenCompra": 16,
        "x": "new Date(2019, 3)",
        "y": 5056052,
        "name": "Herramientas"
    }
}, {
    "Herramientas": {
        "idOrdenCompra": 92,
        "x": "new Date(2019, 4)",
        "y": 2192715,
        "name": "Herramientas"
    }
}, {
    "Mano de Obra": {
        "idOrdenCompra": 19,
        "x": "new Date(2019, 1)",
        "y": 16748410,
        "name": "Mano de Obra"
    }
}, {
    "Mano de Obra": {
        "idOrdenCompra": 91,
        "x": "new Date(2019, 3)",
        "y": 1962698,
        "name": "Mano de Obra"
    }
}]

实际上第一个图形呈现良好，但是当我尝试更新数据时，向我显示一个空图表。

Answer 1

我修复了它更改日期的json内容

"x": "new Date(2019, 3)",

到

"x": "2019, 3",

然后将对象Date应用于此行

$output.='{ x:new Date('.$value['x'].'), y:'.$value['y'].'},';

该图非常出色！

希望对别人有帮助。

无法显示堆叠的列动态json数据

1 个答案: