HighCharts, Json and Ajax


HighCharts, Json and Ajax

我有一个 php 代码,可以生成 json 格式的结果

<?php
header('Content-type: application/json');  
include_once 'Conexion.php';
$objeto = new Conexion();
$conexion = $objeto->conectar();
$fecInicio = (isset($_POST['fechaInicio'])) ? $_POST['fechaInicio'] : '';
$fecFin = (isset($_POST['fechaFin'])) ? $_POST['fechaFin'] : '';
$consulta = "SELECT MONTHNAME(fecha), sum(totalVenta) FROM ventas WHERE fecha BETWEEN '$fecInicio' AND '$fecFin' GROUP BY MONTH(fecha)";
$resultado = $conexion->prepare($consulta);
$resultado->execute();
$result = array();
while ($fila = $resultado->fetch(PDO::FETCH_ASSOC)){ 
   array_push($result, array($fila["MONTHNAME(fecha)"], $fila["sum(totalVenta)"])) ;         
}
print json_encode($result);
$conexion=null;

使用jquery ajax json,我得到了并且我想在数据中使用Highcharts的图表。这是我的JS的代码

var chart1; 
var options;
$(document).ready(function() { 
   
    var fechaInicio; 
    var fechaFin;
   $("#generarReporte").click(function(){   
            fechaInicio = $("#fechaInicio").val();
            fechaFin = $("#fechaFin").val();
            $.ajax({
              url: "../libreria/ORM/reportes.php",
              type: "POST",
              datatype:"json",    
              data:  {fechaInicio:fechaInicio, fechaFin:fechaFin },    
              success: function(data) {
                 //recibo el json desde PHP y lo paso a string
                  var valores = JSON.stringify(data);
                  console.log(valores); 
                  options.series[0].data = valores;
              }
            });
            $("#opcion5").click();        
        });     
     
   
   $("#opcion5").click(function(){  
    var theModal = $("#modalGraficos").modal({
                            show: false
                            });   
    
    
    options = {    
                chart: {
                    renderTo: 'container1', 
                    type: "column"               
                },
                title: {
                    text: "Ventas Mensuales"
                },
                subtitle: {
                    text: "Período consultado, desde: <strong>"+fechaInicio+"</strong> hasta: <strong>"+fechaFin+"</strong>"
                },
                xAxis: {
                    type: "category",
                    labels: {
                        rotation: -45,
                        style: {
                            fontSize: "13px",
                            fontFamily: "Verdana, sans-serif"
                        }
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: "Pesos AR$"
                    }
                },
                //establecemos los colores de las columnas por Mes
                colors: [
                    "#4572A7", 
                    "rgba(248, 44, 91, 0.61)", 
                    "#89A54E", 
                    "#80699B", 
                    "#3D96AE", 
                    "#DB843D", 
                    "#92A8CD", 
                    "#A47D7C", 
                    "#B5CA92"
                    ],
                    plotOptions: {
                        column: {
                            colorByPoint: true
                        }
                    },
                legend: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: "Total del Mes: <b>$ {point.y:.2f}</b>"     
                },
                series: [{
                    name: "Ventas por mes",
                    dataLabels: {
                        enabled: true,
                        //rotation: -90,
                        rotation: 0,
                        color: "#ffffff",
                        align: "center",
                        format: "{point.y:,.2f}", 
                        y: 30, // 10 pixels down from the top
                        style: {
                            fontSize: "13px",
                            fontFamily: "Verdana, sans-serif"
                        }
                    },
                    data:[
                    ]
                }]
    }; //fin options
        var chart1 = new Highcharts.Chart(options);
       
        theModal.on("shown",function(){
           // Recreate the chart now and it will be correct
        }); 
        theModal.modal("show");
    });    
});  

结果控制台日志为有效的 json 格式:[["三月","436400.00"],["四月","1302261.50"]]

控制台日志

我无法制作图表。它可以提供帮助还是协助?谢谢

您需要

设置从 Ajax 调用图表选项获得的数据。 此链接可能会有所帮助 使用 Ajax 将数据加载到 Highcharts 中

一些线索:

  • 图表应该在 ajax 回调中启动
  • 数字不应该像你那样是字符串。它应该是 [["三月",436400.00],["四月",1302261.50]]。为此,请在 json_encode() 函数中设置标志"JSON_NUMERIC_CHECK"。