修改X轴在highcharts [英] modify Xaxis in highcharts

查看:258
本文介绍了修改X轴在highcharts的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我怎样才能在highcharts code来自一个PHP code数组介绍?

在下一code的PHP我生成4阵列,3为数据(TMAX($行),TMIN($ rows1)和雨($ rows2)和最后一个用于咨询的日子($直径)。

  $某物= mysqli_query($ CON,选择城市,TMAX,日(日)由于直径FROM Meteo2其中,城市='。$ _SESSION [城市。'与数据之间'([date8]。分裂$ ​​_ SESSION)。'和ORDER BY日)'([date9]。分裂$ ​​_ SESSION)。';$行=阵列();
$直径=阵列();
$直径['名'] ='迪亚';
$行['名'] ='TMAX';$行['颜色'] ='#FF0000;
$ CONT = 1;
而($ R = mysqli_fetch_array($某物)){
$行['数据'] [] = $ R ['TMAX'];
$直径['类'] [] = $ R ['迪亚'];
}
$某物= mysqli_query($ CON,选择城市,三甲基铟FROM Meteo2其中,城市='。$ _SESSION [城市。'和之间的数据'。分割($ _ SESSION [date8])。' AND'。拆分($ _ SESSION [date9])。按日期顺序);$ rows1 =阵列();
$ rows1 ['名'] ='TMIN';
$ rows1 ['颜色'] ='#00FFFF';
$ rows1 ['VAR valueSuffix'] ='ºC';
而($ RR = mysqli_fetch_assoc($某物)){
$ rows1 ['数据'] [] = $ RR ['TMIN'];
}mysqli_query($ CON,选择城市,雨水Meteo2其中,城市='。$ _SESSION [城市。'和之间的数据'。分割($ _ SESSION [date8])。'和' 。拆分($ _ SESSION [date9])按日期);$ rows2 =阵列();
$ rows2 ['名'] ='RAIN';
$ rows2 [型] ='列';
$ rows2 ['颜色'] ='#4572A7;
$ rows2 ['VAR valueSuffix'] =毫米;
$ rows2 ['变种Y轴'] = 2;
而($ RR = mysqli_fetch_assoc($某物)){
$ rows2 ['数据'] [] = $ RR ['雨'];
}$结果=阵列();
array_push($结果,$ rows2);
array_push($结果,$ rows1);
array_push($结果,$行);
array_push($结果,$ DIA);
打印json_en code($结果,JSON_NUMERIC_CHECK);
mysqli_close($ CON);
?>

当我绘制的图表中,我可以看到的雨线,TMAX,TMIN,但在X轴默认情况下,我有0,1,2,3,4,5,6,7,8,9,10 ,11,12,13,14,15 ....什么,我需要的是$类别内直径[]

信息

和当我检查浏览器中我看到的类别空...
    X轴:{
    类:[]
    }

但在highchart code我有

  X轴:{
类别:['?< PHP的echo $直径>']
},

任何帮助,请????

在这里,我们将展示highcharts code

 <!DOCTYPE HTML>
< HTML和GT;
< HEAD>
< META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8>
&LT;标题&GT; www.meteo4u.com/consultaNouformat.html< /标题&GT;&LT;脚本类型=文/ JavaScript的SRC =htt​​p://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js&GT;&LT; / SCRIPT&GT;
&所述; SCRIPT SRC =HTTP://$c$c.highcharts.com/modules/exporting.js&GT;&下; /脚本&GT;
&LT;脚本类型=文/ JavaScript的&GT;
&LT; PHP
$城市= $ _ POST [市];
在session_start();
$ _SESSION ['市'] = $ _ POST ['市'];
$ _SESSION ['date8'] = $ _ POST ['date8'];
$ _SESSION ['date9'] = $ _ POST ['date9'];
?&GT;
$(函数(){
VAR图;$(文件)。就绪(函数(){
$ .getJSON(的mysql-highcharts.php功能(JSON){图=新Highcharts.Chart({
图:{
renderTo:容器,
类型:'样条',
marginRight:130,
marginBottom:25
},
标题:{
文本:?温度千里马,温度极小我precipitacio A&LT; PHP的echo $城市&GT;,
X:-20 //中心
},
X轴:{
类别:[?&LT; PHP的echo $直径&GT;]
},
Y轴:[{
标签: {
格式:{}值°C',
风格:{
颜色:#FF0000
}
},
标题:{
文字:'温度千里马',
风格:{
颜色:#FF0000
}
}
},{标题:{
文字:'温度极小,
风格:{
颜色:#00FFFF
}
}
},{标签: {
格式:{}值毫米',
风格:{
颜色:#4572A7
}
},
标题:{
文本:precipitacio',
风格:{
颜色:#4572A7
}
},相反的:真
}],
提示:{
格式:函数(){
回归'&LT; B&GT;'+ this.series.name +'&LT; / B&GT;&LT; BR /&GT;'+
this.x +:+ this.y;
}
},
传说:{
布局:垂直,
对齐:正确的,
verticalAlign:'顶',
X:-10,
Y:100,
边框宽度:0
},
学分:{
文本:meteo4u.com',
HREF:HTTP://meteo4u.com',
itemStyle:{
字体:40像素
}
},
系列:JSON
});
});
});
});
&LT; / SCRIPT&GT;
&LT; /头&GT;
&LT;身体GT;
&所述; SCRIPT SRC =HTTP://$c$c.highcharts.com/highcharts.js&GT;&下; /脚本&GT;
&所述; SCRIPT SRC =HTTP://$c$c.highcharts.com/modules/exporting.js&GT;&下; /脚本&GT;
&LT; D​​IV ID =容器的风格=最小宽度:400像素,高度:400像素;保证金:0汽车&GT;&LT; / DIV&GT;
&LT; /身体GT;
&LT; / HTML&GT;


解决方案

它看起来像$直径是一个数组是一个数组,包含所谓的类别的条目。我不认为你可以somply呼应数组变量在highcharts code,如直径只有在服务器上的PHP存在。您正在返回的JSON对象中的类别数组的第3个条目

  array_push($结果,$ DIA);

这意味着你要读的类别出在你highcharts code返回的JSON的。您code是很难效仿,但试试这个:

  X轴:{
    类别:JSON [3] ['类'];
},

不过,我很担心这行:

 系列:JSON

返回的JSON并不仅仅包含一系列的定义,因为它包含的类别为好。它可以工作,但不是很干净code。

How can I introduce in the highcharts code an array that comes from a php code?

In the next code php I generate 4 arrays, 3 for Data (TMax ($rows), TMin ($rows1) and Rain ($rows2) and the last one for the days of the consulting ($dia).

$sth = mysqli_query($con,"SELECT City,TMax, Day(Date) As Dia FROM Meteo2 where City= '" . $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");

$rows = array();
$dia = array();
$dia['name'] = 'Dia';
$rows['name'] = 'TMAX';

$rows['color'] = '#FF0000';
$cont=1;
while($r = mysqli_fetch_array($sth)) {
$rows['data'][] = $r['TMax'];
$dia['categories'][] = $r['Dia'];
}
$sth = mysqli_query($con,"SELECT City,TMin FROM Meteo2 where City= '" .   $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");

$rows1 = array();
$rows1['name'] = 'TMIN';
$rows1['color'] = '#00FFFF';
$rows1['var valueSuffix'] = 'ºC';
while($rr = mysqli_fetch_assoc($sth)) {
$rows1['data'][] = $rr['TMin'];
}

mysqli_query($con,"SELECT City,Rain FROM Meteo2 where City= '" . $_SESSION["City"] ."' AND Data BETWEEN '" . split($_SESSION["date8"]) ."' AND '" . split($_SESSION["date9"]) ."'order by Date");

$rows2 = array();
$rows2['name'] = 'RAIN';
$rows2['type'] = 'column';
$rows2['color'] = '#4572A7';
$rows2['var valueSuffix'] = 'mm';
$rows2['var yAxis'] = 2;
while($rr = mysqli_fetch_assoc($sth)) {
$rows2['data'][] = $rr['Rain'];
}

$result = array();
array_push($result,$rows2);
array_push($result,$rows1);
array_push($result,$rows);
array_push($result,$dia);
print json_encode($result, JSON_NUMERIC_CHECK);


mysqli_close($con);
?>

When I plot the chart, I can see the line of rain, TMax, TMin, but in the Xaxis by default I have 0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15....and what I need is the information of $dia inside categories[]

and when i check the browser I see categories empty... xAxis: { categories: [] },

but in the highchart code I have

xAxis: {
categories: ['<?php echo $dia?>']
},

any help please????

Here I show the highcharts code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>www.meteo4u.com/consultaNouformat.html</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
<?php
$city = $_POST["City"];


session_start();
$_SESSION['City'] = $_POST['City'];
$_SESSION['date8'] = $_POST['date8'];
$_SESSION['date9'] = $_POST['date9'];
?>


$(function () {
var chart;

$(document).ready(function() {
$.getJSON("mysql-highcharts.php", function(json) {

chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Temperatura Maxima, Temperatura Minima i Precipitacio a <?php echo $city ?>',
x: -20 //center
},
xAxis: {
categories:  [<?php echo $dia?>]
},
yAxis: [{
labels: {
format: '{value}°C',
style: {
color: '#FF0000'
}
},
title: {
text: 'Temperatura Maxima',
style: {
color: '#FF0000'
}
}
},{title: {
text: 'Temperatura Minima',
style: {
color: '#00FFFF'
}
}
},{labels: {
format: '{value} mm',
style: {
color: '#4572A7'
}
},
title: {
text: 'Precipitacio',
style: {
color: '#4572A7'
}
},opposite: true
}],
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
},
credits:{
text: 'meteo4u.com',
href:'http://meteo4u.com',
itemStyle: {    
fontSize: '40px'
}
},
series: json
});
});
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

解决方案

It looks like $dia is an array is an array, containing an entry called 'categories'. I don't think you can somply echo the array variable in your highcharts code, as dia only exists in php on the server. You are returning the categories inside your json object in the 3rd entry of the array

array_push($result,$dia);

This means you have to read the categories out of the returned json in your highcharts code. Your code is hard to follow, but try this:

xAxis: {
    categories:  json[3]['categories'];
},

However, I am worried about this line:

series: json

The returned json does not just contain series definitions as it contains the categories as well. It may work, but is not very clean code.

这篇关于修改X轴在highcharts的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆