gpt4 book ai didi

javascript - 带有 json 数据的动态图表

转载 作者:行者123 更新时间:2023-11-29 21:59:50 25 4
gpt4 key购买 nike

我想弄清楚是否有可能在 php 和 mysql 的帮助下从数据库中动态获取 json 数据,并且可以用过于动态自动更新的 highcharts 绘制?任何帮助,将不胜感激。

按照我试过但不能正常工作的代码,想在网站上实现 10 行。

    <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 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);
}
});

关于javascript - 带有 json 数据的动态图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24444001/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com