Question

经过多次尝试失败后，我想我会让比我聪明的人纠正我。我正在使用highcharts创建一个简单的图表。使用$ .post方法检索一次数据（下面的PHP代码）。在控制台中，我看到它格式正确。然而，我无法获得高图来展示它。我已尝试过各种不同的方式，但仍然没有。

如果我使用$ .getJSON然后创建图表，一切正常。但是，我的最终用户可能会多次来回查看相同的数据。我不想每次都查询。我的想法是将数据放在一个全局变量上，然后只使用该数据生成图表。

这是我的php：

<?php 
    require_once "../includes/config_rev.php";
    require_once "../includes/connect.php";
    global $db;

    $st = $db->prepare("SELECT * FROM mdo");   
    $st->execute();


        $category = array();
        $category['name'] = 'mes';

        $series1 = array();
        $series1['name'] = 'Temporeros';

        $series2 = array();
        $series2['name'] = 'Planta';

        $series3 = array();
        $series3['name'] = 'Movilizacion';

    foreach ($st as $stmenuselection)
        {
            $category['data'][] = $stmenuselection['mes'];
            $series1['data'][] = $stmenuselection['Temporeros'];
            $series2['data'][] = $stmenuselection['Planta'];
            $series3['data'][] = $stmenuselection['Movilizacion'];  
        }

    $results = array();
        array_push($results,$category);
        array_push($results,$series1);
        array_push($results,$series2);
        array_push($results,$series3);

    $json = json_encode($results, JSON_NUMERIC_CHECK);
    echo $json; 
    $db = null;  
?>

这是创建图表的JS：

var mdo;

$(document).ready(function()    {
    $.post('_presu_MDO.php', function ( data ) {mdo = data}); 
});

function manodeobra() {
    var options = {
        chart: {
            renderTo: 'mdo',
            type: 'bar'
        },
        title: {
            text: 'Presupuesto de Mano de Obra',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: mdo[0]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Requests'
            },
            labels: {
                overflow: 'justify'
            }
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        plotOptions: {
            bar: {
                dataLabels: {
                    enabled: true
                }
            }
        },
        series: []
    }

    options.xAxis.categories = mdo[0]['mes'];
    options.series[0] = mdo[1]['Temporeros'];
    options.series[1] = mdo[2]['Planta'];
    options.series[2] = mdo[3]['Movilizacion'];
    chart = new Highcharts.Chart(options);


}

如何使用函数manodeobra（）使用mdo变量绘制图表而无需再次运行查询？

提前致谢，

Answer 1

我发现了许多潜在的问题：

1。）你什么时候打电话给manodeobra功能？由于$.post是异步的，因此您需要确保在完成之前不要调用它。

2。）你声明ajax看起来像这个对象数组：

[
    {
        "name": "mes",
        "data": [
            "enero",
            "febrero",
            "marzo",
            "abril",
            "mayo",
            "junio",
            "julio",
            ‌"agosto",
            "septiembre",
            "octubre",
            "noviembre",
            "diciembre"
        ]
    },
    {
        "name": "Temporeros",
        "d‌ata": [
            22000000,
            17000000,
            18000000
        ]
    },
    {
        "name": "Planta",
        "data": [
            15000000,
            15000000,
            150‌00000, <-- IE won't like this!               
        ]
    },
    {
        "name": "Movilizacion",
        "data": [
            2000000,
            2000000,
            2000000
        ]
    }
]

Planta中的悬空逗号对IE无效。

你也有：

options.xAxis.categories = mdo[0]['mes'];
options.series[0] = mdo[1]['Temporeros'];
options.series[1] = mdo[2]['Planta'];
options.series[2] = mdo[3]['Movilizacion'];

JSON中不存在每个数组项的这些属性。此外，您的选项对象中的系列属性是一个空数组，因此.series[1]和.series[2]无效。

我怀疑你需要：

options.xAxis.categories = mdo[0]['data']
options.series.push(mdo[1]);
options.series.push(mdo[2]);
options.series.push(mdo[3]);

3。）学习检查javascript控制台是否有错误（在IE或Chrome中按F12）。如果您检查错误，所有这些问题都会很明显。

绘制全局变量Highcharts

1 个答案: