多次尝试失败后,我想我应该让比我聪明的人来纠正我。我正在使用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",
"data": [
22000000,
17000000,
18000000
]
},
{
"name": "Planta",
"data": [
15000000,
15000000,
15000000, <-- 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)。如果您检查错误,所有这些问题都会很明显。