D3重绘图表间隔

问题描述 投票:0回答:1

到目前为止,我有一个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>
php ajax d3.js
1个回答
0
投票

这里是与您当前使用的版本相同的代码段,但是此代码段不包含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>
© www.soinside.com 2019 - 2024. All rights reserved.