PHPおよびmySQLを介してJQueryからChart.jsグラフの生成を高速化するにはどうすればよいですか？

debugcn 投稿 Dev

FranzHuber23

私の前の2つの質問によると：＃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>

誰かがここでいくつかのアイデアを持っていますか？

ケネス・チャン

phpから直接データを埋め込もうとします。またはを使用してファイルを含める

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

以下のように、ajaxgetリクエストを置き換えます。

    <?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]