动态highcharts使用JSON数据 [英] dynamic highcharts with json data
本文介绍了动态highcharts使用JSON数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我米试图弄清楚这是有可能使JSON数据动态获取从数据库PHP和MySQL的帮助下，可与highcharts太动态自动更新绘制？任何帮助将是AP preciated。
下面的$ C $词都试过，不正常工作，要落实到网站为10行。
＆LT; HTML＆GT;
＆其中; HEAD＆GT;
＆LT; TITLE＆GT; highchart例如＆LT; / TITLE＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery-1.10.1.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述;脚本的src =的http：//$c$c.highcharts.com/highcharts.js＆GT;＆所述; /脚本＆GT;
＆所述;脚本的src =的http：//$c$c.highcharts.com/modules/exporting.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR图;
传播的RequestData（）{
$阿贾克斯（{
网址：活的服务器data.php，
成功：函数（点）{
VAR系列= chart.series [0]
移= series.data.length＆GT; 20; //如果偏移的系列
//长于2
//添加点
chart.series [0] .addPoint（点，真实，移）;
//一秒钟后再次调用它
的setTimeout（requestData1，1000）;
}，
缓存：假的，
}）;
}
功能requestData1（）{
$阿贾克斯（{
网址：活的服务器data.php，
成功：函数（点）{
变种系列2 = chart.series [1]，
移= series2.data.length＆GT; 20; //如果偏移的系列
//长于20
//添加点
chart.series [1] .addPoint（点，真实，移）;
//一秒钟后再次调用它
的setTimeout（的RequestData，1000）;
}，
缓存：假的，
}）;
}
$（函数（）{
$（文件）。就绪（函数（）{
图=新Highcharts.Chart（{
图表： {
renderTo：容器，
defaultSeriesType：花键，
事件：{
负载：的RequestData
}
}，
标题： {
文字：现场随机数据
}，
x轴：{
类型：日期时间，
tickPixelInterval：150，
maxZoom：20 * 1000
}，
Y轴：
{
minPadding：0.2，
maxPadding：0.2，
标题： {
文本： ''，
保证金：80
}
}，
系列： [
{
名称：随机数据，
数据： []
}，
{
名称：'哈哈哈'，
数据： []
}
]
}）;
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; / HEAD＆GT;
＆LT; BODY＆GT;
＆LT; DIV ID =容器
风格=最小宽度：728px;高度：400像素;保证金：0汽车＆GT;＆LT; / DIV＆GT;
＆LT; / BODY＆GT;
＆LT; / HTML＆GT;
***实况服务器data.php是如下：
＆LT; PHP
//设置JSON头
标题（内容类型：文本/ JSON）;
// x值是当前的JavaScript的时间，这是Unix时间乘以
// 1000。
$ X =时间（）* 1000;
// y值是随机数
$ Y =兰特（48,52）;
//创建一个PHP数组和回声它作为JSON
$ RET =阵列（$ X，$ Y）;
回声json_en code（$ RET）;
？＆GT;
解决方案
您可以使用
尝试 VAR选项= {
图表： {
renderTo：图表，
}，
学分：{
启用：假的
}，
标题： {
文本：林pression /点击概览，
X：-20
}，
x轴：{
类别：[{}]
}，
提示：{
格式：函数（）{
VAR S ='＆LT; B＆GT;+ this.x +'＆LT; / B＆GT;';
$每个（this.points，功能（我，点）{
S + ='＆LT; BR /＆GT;+ point.series.name +：+ point.y;
}）;
返回S;
}，
共享：真
}，
系列： [{}，{}]
};
$阿贾克斯（{
网址：json.php
数据：'秀= IM pression'，
类型：'后'，
数据类型：JSON，
成功：功能（数据）{
options.xAxis.categories = data.categories;
options.series [0]。名称='林pression';
options.series [0] .DATA = data.im pression;
options.series [1]。名称='点击';
options.series [1] .DATA = data.clicks;
VAR图=新Highcharts.Chart（选件）;
}
}）;
I m trying to figure it out that is it possible to make the json data fetched dynamically from a database with the help of php and mysql and can be plotted with highcharts that too dynamic auto updating? Any help would be appreciated.
following the code i have tried and is not working properly and want to implement to the the website for 10 lines.
<HTML>
<HEAD>
<TITLE>highchart example</TITLE>
<script type="text/javascript"src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
var chart;
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 2
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData1, 1000);
},
cache: false,
});
}
function requestData1() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series2 = chart.series[1],
shift = series2.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[1].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false,
});
}
$(function () {
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
events: {
load: requestData
}
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis:
{
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: '',
margin: 80
}
},
series: [
{
name: 'Random data',
data: []
},
{
name: ' hahaha',
data: []
}
],
});
});
});
</script>
</HEAD>
<BODY>
<div id="container"
style="min-width: 728px; height: 400px; margin: 0 auto"></div>
</BODY>
</HTML>
*** the live-server-data.php is as followed:
<?php
// Set the JSON header
header("Content-type: text/json");
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = rand(48,52);
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
解决方案
You can try with
var options = {
chart: {
renderTo: 'chart',
},
credits: {
enabled: false
},
title: {
text: 'Impression/Click Overview',
x: -20
},
xAxis: {
categories: [{}]
},
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+point.series.name+': '+point.y;
});
return s;
},
shared: true
},
series: [{},{}]
};
$.ajax({
url: "json.php",
data: 'show=impression',
type:'post',
dataType: "json",
success: function(data){
options.xAxis.categories = data.categories;
options.series[0].name = 'Impression';
options.series[0].data = data.impression;
options.series[1].name = 'Click';
options.series[1].data = data.clicks;
var chart = new Highcharts.Chart(options);
}
});
这篇关于动态highcharts使用JSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
