绘制全局变量Highcharts


Plotting Global variable Highcharts

多次尝试失败后,我想我应该让比我聪明的人来纠正我。我正在使用highcharts创建一个简单的图表。使用$检索一次数据(下面的php代码)。post方法。在控制台中,我看到它已正确格式化。然而,我无法让图表显示它。我从各种帖子中尝试了许多不同的方法,但仍然一无所获。

如果我使用$,一切都很好。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变量,而不必再次运行查询?

提前致谢

我发现了一些潜在的问题:

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中不存在。另外,您的options对象中的series属性是一个空数组,因此.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)。如果您检查错误,所有这些问题都会很明显。