如何通过PHP和mySQL加快从JQuery生成Chart.js图的速度？

弗朗兹·休伯（FranzHuber）23

根据我之前的两个问题：＃1和＃2。由于结果图的加载速度非常慢（即使数据集中只有50个值），我如何在javascript中固定以下代码？

<!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>

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

肯尼斯·陈（Kenneth Chan）

您将尝试直接从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");

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。