如何从JQuery上通过PHP和mySQL生成Chart.js图生成？

根据我之前的两个问题：#1和#2。如何在JavaScript中加载以下代码，因为结果图加载速度非常缓慢（即使数据集中只有50个值）？如何从JQuery上通过PHP和mySQL生成Chart.js图生成？

<!doctype html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="/node_modules/chart.js/dist/Chart.bundle.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<style> 
    canvas{ 
     -moz-user-select: none; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
    } 
    .no-js #loader { display: none; } 
    .js #loader { display: block; position: absolute; left: 100px; top: 0; } 
    .loaderClass { 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     width: 100%; 
     height: 100%; 
     z-index: 9999; 
     background: url(web_images/loader.gif) center no-repeat #fff; 
    } 
</style> 
<title>Temperatur und Feuchtigkeit</title> 
</head> 
<body> 
    <div class="loaderClass"></div> 
    <div style="width: 100%;"> 
     <canvas id="canvas"></canvas> 
    </div> 
    <script> 
     var data = [], labels = [], temperature=[], humidity=[]; 
     $.get('GetTestData.php', function(dataGet) { 
      data = JSON.parse(dataGet); 
      data['labels'].forEach(function(singleResult) { 
       labels.push(singleResult); 
      }); 
      data['temperature'].forEach(function(singleResult) { 
       temperature.push(singleResult); 
      }); 
      data['humidity'].forEach(function(singleResult) { 
       humidity.push(singleResult); 
      }); 
      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myLine = new Chart(ctx, config); 
      $(".loaderClass").fadeOut("slow"); 
     }); 

     var config = { 
      type: 'line', 
      data: { 
       labels: labels, 
       datasets: [{ 
        label: "Temperatur", 
        data: temperature, 
        fill: false, 
        yAxisID: 'A' 
       }, 
       { 
        label: "Feuchtigkeit", 
        data: humidity, 
        fill: false, 
        yAxisID: 'B' 
       }] 
      }, 
      options: { 
       responsive: true, 
       title:{ 
        display:true, 
        text:'Temperatur und Feuchtigkeit' 
       }, 
       tooltips: { 
        mode: 'label' 
       }, 
       hover: { 
        mode: 'dataset' 
       }, 
       scales: { 
        xAxes: [{ 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: 'Datum' 
         } 
        }], 
        yAxes: [{ 
         id: 'A', 
         position: 'left', 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: 'Temperatur in у' 
         }, 
         ticks: { 
          suggestedMin: -40, 
          suggestedMax: 60, 
         }, 
         { 
         id: 'B', 
         position: 'right', 
         display: true, 
         scaleLabel: { 
          display: true, 
          labelString: 'Luftfeuchtigkeit in %' 
         }, 
         ticks: { 
          suggestedMin: 0, 
          suggestedMax: 100, 
         } 
        }], 
       } 
      } 
     }; 

     $.each(config.data.datasets, function(i, dataset) { 
      if(i==0){ 
       dataset.borderColor = 'rgba(255,0,0,1)'; 
       dataset.backgroundColor = 'rgba(255,0,0,1)'; 
       dataset.pointBorderColor = 'rgba(0,50,255,1)'; 
       dataset.pointBackgroundColor = 'rgba(0,0,0,1)'; 
      } 
      else{ 
       dataset.borderColor = 'rgba(200,0,255,1)'; 
       dataset.backgroundColor = 'rgba(200,0,255,1)'; 
       dataset.pointBorderColor = 'rgba(0,50,255,1)'; 
       dataset.pointBackgroundColor = 'rgba(0,0,0,1)'; 
      } 
      dataset.pointBorderWidth = 1; 
     }); 

     window.onload = function() { 
      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myLine = new Chart(ctx, config); 
     }; 
    </script> 
</body> 
</html>

有没有人在这里有一些想法？

来源

2016-10-03 FranzHuber23

你会尝试直接从php中嵌入数据。或包含使用的文件

<?php include('getTestData.php'); ?>

如下所示替换ajax get请求。

<?php foreach($dataGet->label as $label){ ?> 
    labels.push("<?= $label ?>"); 
<?= } ?> 

    <?php foreach($dataGet->temperature as $temperature){ ?> 
    temperature.push("<?= $temperature ?>"); 
<?= } ?> 

    <?php foreach($dataGet->humidity as $humidity){ ?> 
    humidity.push("<?= $humidity ?>"); 
<?= } ?> 

    var ctx = document.getElementById("canvas").getContext("2d"); 
window.myLine = new Chart(ctx, config); 
$(".loaderClass").fadeOut("slow");

来源

2016-10-27 08:55:41

好吧，我会试试这个:) – FranzHuber23

好的，谢谢你为这个:) – FranzHuber23

如何从JQuery上通过PHP和mySQL生成Chart.js图生成？

回答

相关问题