Javascript 带有json数据的动态海图
我试图弄明白，有没有可能在php和mysql的帮助下，让json数据动态地从数据库中获取，并且可以用动态自动更新的highcharts绘制？任何帮助都将不胜感激 下面的代码，我已经尝试过，是不是正常工作，并希望实现的网站为10行Javascript 带有json数据的动态海图,javascript,jquery,ajax,json,highcharts,Javascript,Jquery,Ajax,Json,Highcharts,我试图弄明白，有没有可能在php和mysql的帮助下，让json数据动态地从数据库中获取，并且可以用动态自动更新的highcharts绘制？任何帮助都将不胜感激 下面的代码，我已经尝试过，是不是正常工作，并希望实现的网站为10行 <HTML> <HEAD> <TITLE>highchart example</TITLE> <script type="text/javascript"src="http://code.jquery.com
<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);
?>
海图示例
var图；
函数requestData（）{
$.ajax({
url:“live server data.php”，
成功：功能（点）{
var系列=图表系列[0]，
shift=series.data.length>20；//如果序列为
//超过2
//补充一点
chart.series[0]。添加点（点、真、移位）；
//一秒钟后再打
setTimeout（requestdata11000）；
},
cache:false，
});
}
函数requestData1（）{
$.ajax({
url:“live server data.php”，
成功：功能（点）{
var series2=图表系列[1]，
shift=series2.data.length>20；//如果序列为
//超过20
//补充一点
chart.series[1]。添加点（点、真、移位）；
//一秒钟后再打
setTimeout（requestData，1000）；
},
cache:false，
});
}
$（函数（）{
$（文档）.ready（函数（）{
图表=新的高点图表。图表({
图表：{
renderTo:'容器'，
defaultSeriesType:“样条线”，
活动：{
加载：请求数据
}
},
标题：{
文本：“实时随机数据”
},
xAxis：{
键入：“日期时间”，
像素间隔：150，
最大缩放：20*1000
},
亚克斯：
{
最小填充：0.2，
最大填充：0.2，
标题：{
文本：“”，
差额：80
}
},
系列：[
{
名称：'随机数据'，
数据：[]
},
{
名字：“哈哈哈”，
数据：[]
}
],
});
});
});
***live-server-data.php如下所示：
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 20
// add the point
chart.series[0].addPoint(point, true, shift);
// call it again after one second
setTimeout(requestData, 1000);
},
cache: false
});
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);
}
});
var选项={
图表：{
renderTo:'图表'，
},
学分：{
已启用：false
},
标题：{
文本：“印象/点击概览”，
x:-20
},
xAxis：{
类别：[{}]
},
工具提示：{
格式化程序：函数（）{
var s=''+此.x+''；
$.each（this.points，function（i，point）{
s+='
'+point.series.name+'：'+point.y；
});
返回s；
},
分享：真的
},
系列：[{}，{}]
};
$.ajax({
url:“json.php”，
数据：“显示=印象”，
类型：'post'，
数据类型：“json”，
成功：功能（数据）{
options.xAxis.categories=data.categories；
options.series[0]。名称='Impression'；
options.series[0]。data=data.impression；
options.series[1]。名称='单击'；
options.series[1]。data=data.clicks；
var图表=新的Highcharts.图表（选项）；
}
});