javascript - 如何从外部 javascript 文件中管理的图形中提取原始数据并将其存储为 php 中的变量？
问题描述
我想弄清楚如何从 Javascript 文件（它管理数据库中的数据以显示图形）获取行数据（即 json 文件或其他文件）并将这些数据传递给 php 中的数组以获取 CSV。我可以通过哪种方式做到这一点？
编辑：
我想更清楚一点，我需要从图表中获取数据以导出为 CSV。我选择的方式是：
使用图形从 graph.js 文件中获取数据
将此数据放入 project-page.php 文件（托管图表的页面）
以 CSV 格式下载图表报告
这是PHP文件
<?php
$this('@html')->add_header_snippet('<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->');
$this('@html')->set_header_param('title',$project['label']);
$this->css('/js/jqplot/jquery.jqplot.css');
$this->js('/js/jqplot/jquery.jqplot.min.js');
$this->js('https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyDK5e1XCLr1xXuxGQMQybdlxr0jRPZ4b-Q');
//$this->js('https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false');
$this->js('/js/jqplot/plugins/jqplot.highlighter.min.js');
$this->js('/js/jqplot/plugins/jqplot.cursor.min.js');
$this->js('/js/jqplot/plugins/jqplot.dateAxisRenderer.min.js');
$this->js('js/map.js');
$this->js('js/graph.js');
echo '<script type="text/javascript">DM_PROJECT='.$project['id'].';</script>';
$this('customer_nav')->display();
?>
<div class="container main-container">
<div class="row">
<!-- CONTENT -->
<div class="col-12">
<h1 class="first-heading"><?php echo $this->esc($project['label']); ?></h1>
<!-- status -->
<div class="project-summary">
<p class="lead"><?php echo $this->html('Summary'); ?></p>
<p>
<b><?php echo $this->html('Coords.'); ?></b>:
<?php echo $project['center_lat']; ?>,
<?php echo $project['center_lon']; ?></p>
<?php $this->display('../project_table.php',array('project'=>$project,'actions'=>0,'mode'=>($project['end_date']?'close':'open'))); ?>
</div>
<!-- map -->
<div class="project-map">
<p class="lead">Map</p>
<div id="map-canvas" class="map-canvas center-block"></div>
</div>
<!-- graph -->
<div class="project-graph">
<p class="lead">Graph</p>
<div class="clearfix">
<div class= "btn btn-info btn-sm" onclick="showBtnLive()">More info</div>
<div class="btn-group pull-right" style="margin-left:20px">
<a href="javascript:;" class="btn btn-info btn-sm button-daily active"><?php echo $this->_('Full history'); ?></a>
<?php if( !$project['end_date'] ) { ?>
<a id="BtnLive" href="javascript:;" class="btn btn-info btn-sm button-live" style="display:none" ><?php echo $this->_('Last 24 hours'); ?></a>
<script>
function showBtnLive() {
var x = document.getElementById("BtnLive");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
<?php } ?>
</div>
<!-- <a href="javascript:;" class="btn btn-default btn-sm pull-right button-reset">Reset zoom</a> -->
</div>
<div id="chart-canvas" class="chart-canvas"></div>
</div>
</div><!--/col-12-->
<!-- /CONTENT -->
</div> <!-- /row -->
</div> <!-- /container -->
这是放置在另一个文件夹中的完整 javascript 代码
提前致谢
$(document).ready(function(){
//daily_graph();
var plot1, plot2;
function daily_graph() {
var line1=[['11/15/2013', 10], ['11/16/2013', 12], ['11/17/2013', 15], ['11/18/2013', 19],
['11/19/2013', 33], ['11/20/2013', 17], ['11/21/2013', 15], ['11/22/2013', 22],
['11/23/2013', 26], ['11/24/2013', 30], ['11/25/2013', 32], ['11/26/2013', 23]];
plot1 = $.jqplot('chart-canvas', [line1], {
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d',
showGridline: false,
showMark: false
}
},
yaxis:{
numberTicks: 5,
tickOptions:{
showGridline: true,
showMark: false
}
}
},
seriesDefaults: {
lineWidth: 4,
shadow: false,
fill: true,
fillAndStroke: true,
fillAlpha: 0.1,
markerOptions: {
size: 12,
shadow: false
}
},
highlighter: {
show: true,
tooltipAxes: 'y',
sizeAdjust: 8
},
cursor: {
show: true,
//zoom: true,
showTooltip: false
},
grid: {
drawGridLines: false,
background: '#ffffff',
gridLineColor: '#efefef',
borderColor: '#efefef',
borderWidth: 1,
shadow: false
}
});
var h=1;
}
function live_graph() {
var line2=[['16:01', 10], ['16:02', 12], ['16:03', 8], ['16:04', 8], ['16:05', 9], ['16:06', 13], ['16:07', 12], ['16:08', 14], ['16:09', 16], ['16:10', 12], ['16:11', 11], ['16:12', 10], ['16:13', 10], ['16:14', 10], ['16:15', 9], ['16:16', 8], ['16:17', 7], ['16:18', 6], ['16:19', 5], ['16:20', 3], ['16:21', 0], ['16:22', 2], ['16:23', 4], ['16:24', 7], ['16:25', 7], ['16:26', 9], ['16:27', 8], ['16:28', 10], ['16:29', 10], ['16:30', 10], ['16:31', 10], ['16:32', 10], ['16:33', 12], ['16:34', 11], ['16:35', 11], ['16:36', 13], ['16:37', 14], ['16:38', 15], ['16:39', 14], ['16:40', 13], ['16:41', 12], ['16:42', 11], ['16:43', 10], ['16:44', 10], ['16:45', 10], ['16:46', 14], ['16:47', 16], ['16:48', 18], ['16:49', 20], ['16:50', 19], ['16:51', 19], ['16:52', 17], ['16:53', 14], ['16:54', 13], ['16:55', 16], ['16:56', 17], ['16:57', 18], ['16:58', 19], ['16:59', 19]];
plot2 = $.jqplot('chart-canvas', [line2], {
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
//formatString:'%b %#d',
showGridline: false,
showMark: false
}
},
yaxis:{
numberTicks: 5,
tickOptions:{
showGridline: true,
showMark: false
}
}
},
seriesDefaults: {
lineWidth: 4,
shadow: false,
fill: true,
fillAndStroke: true,
fillAlpha: 0.1,
markerOptions: {
size: 12,
shadow: false
}
},
highlighter: {
show: true,
tooltipAxes: 'y',
sizeAdjust: 8
},
cursor: {
show: true,
//zoom: true,
showTooltip: false
},
grid: {
drawGridLines: false,
background: '#ffffff',
gridLineColor: '#efefef',
borderColor: '#efefef',
borderWidth: 1,
shadow: false
}
});
}
});
if( typeof dm==='undefined' ) var dm={};
console.log(plot1);
jQuery(document).ready(function(){
!(function($) {
dm.phist=function(graphId,projectId,controlsClass,mode) {
var phist=this;
if( !projectId ) this.projectId=DM_PROJECT;
else this.projectId=projectId;
if( !graphId ) this.graphId='chart-canvas';
else this.graphId=graphId;
if( controlsClass ) this.controlsClass=controlsClass;
else this.controlsClass='project-graph';
this.mode='daily';
this.plot=null;
this.lastRefresh=null;
this.refresh=function() {
var step=60*60*24;
var end=null;
var start=null;
var adjust_x=1;
var interval=step;
var fmt='%b %#d';
if( phist.mode=='live' ) {
step=60*60;
end=Math.ceil((new Date().getTime()/1000) / 3600 )*3600;
start=end-60*60*24;
fmt='%#H:00';
adjust_x=0;
interval=step;
}
this.lastRefresh=new Date().getTime();
$.ajax({
url: TDZ_ROOT+'/_tdz/get_project_history/',
dataType: 'json',
data:{id:phist.projectId,step:step,start:start,adjust_x:adjust_x,end:end},
success: function(r) {
if( r.status=='ok' ) {
if( phist.plot ) phist.plot.destroy();
if( !r.result.length ) return;
if( r.result.length==1 ) {
r.result=[[r.result[0][0]-60000*60*24,0],r.result[0]]
}
var xmin=r.result[0][0];
var xmax=r.result[r.result.length-1][0];
var w=$('#'+phist.graphId).width();
while( w*interval*1000/(xmax-xmin)<50 ) interval*=2;
phist.plot = $.jqplot(phist.graphId, [r.result], {
axes:{
xaxis:{
max: xmax,
min: xmin,
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
formatString:fmt,
showGridline: true,
showMark: false,
},
tickInterval: interval
},
yaxis:{
min:0,
numberTicks: 5,
tickOptions:{
showGridline: true,
showMark: false
}
}
},
seriesDefaults: {
lineWidth: 4,
shadow: false,
fill: true,
fillAndStroke: true,
fillAlpha: 0.1,
markerOptions: {
size: 12,
shadow: false
}
},
highlighter: {
show: true,
tooltipAxes: 'y',
sizeAdjust: 8
},
cursor: {
show: true,
//zoom: true,
showTooltip: false
},
grid: {
drawGridLines: false,
background: '#ffffff',
gridLineColor: '#efefef',
borderColor: '#efefef',
borderWidth: 1,
shadow: false
}
});
var lastRefresh=phist.lastRefresh;
window.setTimeout(function() {
if( phist.lastRefresh==lastRefresh ) {
console.log('AUTOREFRESH');
phist.refresh();
}
},10*1000);
}
},
error: function(r) {
console.log(r);
}
});
}
$('.'+this.controlsClass+' .button-daily').click(function() {
$(this).addClass('active');
$('.button-live').removeClass('active');
phist.mode='daily';
phist.refresh();
});
$('.'+this.controlsClass+' .button-live').click(function() {
$(this).addClass('active');
$('.button-daily').removeClass('active');
phist.mode='live';
phist.refresh();
});
/*
$('.'+this.controlsClass+' .button-reset').click(function() {
if($('.button-daily').hasClass('active')) plot1.resetZoom();
if($('.button-live').hasClass('active')) plot2.resetZoom();
});
*/
$('.'+this.controlsClass+' .button-'+this.mode).trigger('click');
//this.refresh();
}
if( typeof DM_PROJECT!=='undefined' && $('#chart-canvas').length ) dm.default_phist=dm.phist();
})(jQuery);
});
解决方案
推荐阅读
- python - Flask 扩展、上下文和 Neo4j
- java - 传输文件
- yii2 - 在 Yii2 中上传文件（word、pdf、excel）？
- mongodb - 在猫鼬承诺之间传递数据？
- javascript - 参考错误：未定义响应AngularJs
- python - 如何从 QLineEdit 继承 returnPressed() 到 QPlainTextEdit
- ruby - 为什么我的 Ruby 脚本中的 shell 变量不可见？
- c++ - 符号 y 无法解析
- javascript - 将cookie设置为菜单jquery
- azure-devops - 使用 VSTS 的 Fastlane 发布到 TestFlight