到目前为止,我有一个D3雷达图,其中包含当前设置。一个'phpmysqlconnect.php'文件/包含,它执行PDO SQL查询。 AJAX fetchdata带有一个似乎可以正常工作并显示在控制台日志中的间隔。我现在正在尝试/想要让雷达图在每次数据更改或设置为固定时间间隔时重绘。
是否要这样做?
<?php include 'phpmysqlconnect.php' ?>
<script>
function fetchdata(){
$.ajax({
url: 'phpmysqlconnect.php',
type: 'post',
success: function(data){
// Set result to div or target
$('#my-result').html(data);
}
});
}
// interval fetch
$(document).ready(function(){
setInterval(fetchdata,5000);
});
</script>
<!-- show results -->
<div id="my-result"></div>
<div class="radarChart"></div>
<script src="radarChart.js"></script>
<script>
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
[
{axis:"Battery Life",value:<?php echo json_encode($data[0]['field_18']) ?>},
{axis:"Brand",value:<?php echo json_encode($data[0]['field_19']) ?>},
{axis:"Contract Cost",value:<?php echo json_encode($data[0]['field_20']) ?>},
{axis:"Design And Quality",value:<?php echo json_encode($data[0]['field_21']) ?>},
{axis:"Have Internet Connectivity",value:<?php echo json_encode($data[0]['field_22']) ?>},
{axis:"Large Screen",value:<?php echo json_encode($data[0]['field_23']) ?>},
{axis:"Price Of Device",value:1},
{axis:"To Be A Smartphone",value:2}
]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scale.ordinal()
.range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 5,
levels: 5,
roundStrokes: false,
color: color
};
//Call function to draw the Radar chart
RadarChart(".radarChart", data, radarChartOptions);
</script>
这里是与您当前使用的版本相同的代码段,但是此代码段不包含Ajax调用,因此请检查第二个代码段以获取Ajax调用(由于您没有这样做,所以我不确定是否可以使用该代码段。 t包含您的php代码)。
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
[//iPhone
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
],[//Samsung
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
],[//Nokia Smartphone
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scale.ordinal()
.range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
//Call function to draw the Radar chart
RadarChart(".radarChart", data, radarChartOptions);
setInterval(function() {
var data = [
[//iPhone
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
],[//Samsung
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
],[//Nokia Smartphone
{axis:"Battery Life",value: (Math.random() * 100) / 100},
{axis:"Brand",value: (Math.random() * 100) / 100},
{axis:"Contract Cost",value: (Math.random() * 100) / 100},
{axis:"Design And Quality",value: (Math.random() * 100) / 100},
{axis:"Have Internet Connectivity",value: (Math.random() * 100) / 100},
{axis:"Large Screen",value: (Math.random() * 100) / 100},
{axis:"Price Of Device",value: (Math.random() * 100) / 100},
{axis:"To Be A Smartphone",value: (Math.random() * 100) / 100}
]
];
RadarChart(".radarChart", data, radarChartOptions);
}, 1000)
body {
font-family: 'Open Sans', sans-serif;
font-size: 11px;
font-weight: 300;
fill: #242424;
text-align: center;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
cursor: default;
}
.legend {
font-family: 'Raleway', sans-serif;
fill: #333333;
}
.tooltip {
fill: #333333;
}
<script src="https://gist.githubusercontent.com/nbremer/21746a9668ffdf6d8242/raw/980dda56c87a6813fc4ba527ec7db0b53e83dbb5/radarChart.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
<title>Smoothed D3.js Radar Chart</title>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,300" rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<!-- D3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
</head>
<body>
<div class="radarChart"></div>
<script src="http://bl.ocks.org/nbremer/raw/21746a9668ffdf6d8242/980dda56c87a6813fc4ba527ec7db0b53e83dbb5/radarChart.js"></script>
</body>
</html>
我不保证这会行得通,但可能是您的起点,我也强烈建议关注@ delboy1978uk关于radarChart增强版的评论,它遵循最新标准,并已针对d3的最新版本进行了更新。 。
<?php include 'phpmysqlconnect.php' ?>
<script>
function fetchdata(){
$.ajax({
url: 'phpmysqlconnect.php',
type: 'post',
success: function(data){
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 5,
levels: 5,
roundStrokes: false,
color: color
};
var data = [
[
{axis:"Battery Life",value:<?php echo json_encode($data[0]['field_18']) ?>},
{axis:"Brand",value:<?php echo json_encode($data[0]['field_19']) ?>},
{axis:"Contract Cost",value:<?php echo json_encode($data[0]['field_20']) ?>},
{axis:"Design And Quality",value:<?php echo json_encode($data[0]['field_21']) ?>},
{axis:"Have Internet Connectivity",value:<?php echo json_encode($data[0]['field_22']) ?>},
{axis:"Large Screen",value:<?php echo json_encode($data[0]['field_23']) ?>},
{axis:"Price Of Device",value:1},
{axis:"To Be A Smartphone",value:2}
]
];
RadarChart(".radarChart", data, radarChartOptions);
}
});
}
// interval fetch
$(document).ready(function(){
setInterval(fetchdata,5000);
});
</script>
<!-- show results -->
<div id="my-result"></div>
<div class="radarChart"></div>
<script src="radarChart.js"></script>
<script>
/* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
//////////////////////////////////////////////////////////////
//////////////////////// Set-Up //////////////////////////////
//////////////////////////////////////////////////////////////
var margin = {top: 100, right: 100, bottom: 100, left: 100},
width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
//////////////////////////////////////////////////////////////
////////////////////////// Data //////////////////////////////
//////////////////////////////////////////////////////////////
var data = [
[
{axis:"Battery Life",value:<?php echo json_encode($data[0]['field_18']) ?>},
{axis:"Brand",value:<?php echo json_encode($data[0]['field_19']) ?>},
{axis:"Contract Cost",value:<?php echo json_encode($data[0]['field_20']) ?>},
{axis:"Design And Quality",value:<?php echo json_encode($data[0]['field_21']) ?>},
{axis:"Have Internet Connectivity",value:<?php echo json_encode($data[0]['field_22']) ?>},
{axis:"Large Screen",value:<?php echo json_encode($data[0]['field_23']) ?>},
{axis:"Price Of Device",value:1},
{axis:"To Be A Smartphone",value:2}
]
];
//////////////////////////////////////////////////////////////
//////////////////// Draw the Chart //////////////////////////
//////////////////////////////////////////////////////////////
var color = d3.scale.ordinal()
.range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 5,
levels: 5,
roundStrokes: false,
color: color
};
//Call function to draw the Radar chart
RadarChart(".radarChart", data, radarChartOptions);
</script>