Buat carta visualisasi data masa nyata menggunakan PHP dan Highcharts

Dengan perkembangan berterusan teknologi Internet, analisis data dan visualisasi telah menjadi bahagian yang amat diperlukan dalam aplikasi perusahaan dan peribadi. Antaranya, visualisasi data masa nyata menunjukkan kepentingannya yang tiada tandingannya. Ia membolehkan pengguna melihat perubahan dalam data dalam masa nyata dan membuat keputusan dengan cepat untuk mencapai faedah terbaik.

Untuk dapat mempersembahkan jadual visualisasi data masa nyata, kami memerlukan alat yang boleh melukis secara dinamik. Highcharts ialah alat sedemikian yang sangat disyorkan. Pada masa yang sama, PHP ialah bahasa pengaturcaraan web yang sangat popular dan mudah dipelajari. Oleh itu, kita boleh menggunakan PHP dan Highcharts bersama-sama untuk mencipta carta visualisasi data masa nyata.

Pertama, kita perlu menyediakan data. Dalam visualisasi data masa nyata, perubahan data berlaku pada bila-bila masa. Oleh itu, kami menggunakan kaedah data simulasi di sini. Kita boleh menulis skrip PHP untuk menggunakan penjana nombor rawak untuk menjana data secara berterusan. Berikut ialah kod untuk mensimulasikan data:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

function sendMsg($id, $msg) {
  echo "id: $id
";
  echo "data: $msg
";
  echo "
";
  ob_flush();
  flush();
}

$i = 0;
while(true) {
    $data = rand(0, 100);
    sendMsg($i++, $data);
    sleep(1);
}
?>

Dalam kod di atas, mula-mula kami memberitahu penyemak imbas bahawa ini ialah strim acara dengan menetapkan Content-Type kepada text/event-stream. Kemudian sebelum setiap kali kami menghantar data, kami akan menghantar id untuk mewakili id ​​data yang dihantar kali ini untuk memudahkan pertukaran data antara pelayar dan pelayan. Akhir sekali, data dihantar melalui fungsi sendMsg, supaya data boleh terus dijana dan dihantar ke penyemak imbas.

Seterusnya, kami memerlukan cara untuk mendapatkan dan menghuraikan data ini dalam masa nyata. Di sini kami memilih perpustakaan JavaScript: EventSource. Ia adalah API baharu dalam H5, terutamanya digunakan untuk membina pelayan untuk menolak aliran acara ke penyemak imbas. Berikut ialah kod untuk menggunakan EventSource:

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 在这里进行数据处理
  };
});

Dalam kod di atas, kami mula-mula mencipta objek EventSource dan menentukan URL pelayan yang ingin disambungkan. Kemudian tetapkan fungsi respons acara onmessage Apabila pelayan menghantar data, fungsi ini akan dicetuskan dan data akan dihantar sebagai parameter. Kemudian kita boleh melakukan pemprosesan data dalam fungsi onmessage, seperti memaparkan data.

Akhir sekali, kita perlu menggunakan Highcharts untuk menggambarkan data ke dalam carta. Highcharts ialah perpustakaan JavaScript untuk lukisan carta yang boleh menjana pelbagai jenis carta, seperti carta linear, carta bar, carta pai, dll. Berikut ialah kod untuk menggambarkan data ke dalam carta garis:

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: '实时数据可视化'
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: '数据'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  series: [{
    name: '数据',
    data: []
  }]
});

$(document).ready(function() {
  var source = new EventSource("demo.php");
  source.onmessage = function(event) {
    var data = event.data;
    console.log(data);  // 打印数据到控制台

    // 把数据转化成坐标
    var point = [new Date().getTime(), parseInt(data)];

    // 把坐标添加到图表中
    var series = chart.series[0];
    var shift = series.data.length > 20; // 确保图表上只有20个点
    series.addPoint(point, true, shift);
  };
});

Dalam kod di atas, kami mula-mula mencipta objek carta lanjutan dan menambah beberapa tetapan asas seperti tajuk, paksi dan siri data. Kemudian dalam acara Sedia Dokumen, kami juga mencipta objek EventSource dan menyediakan fungsi respons acara onmessage untuk memproses data yang dihantar oleh pelayan. Kami menukar data kepada koordinat dan menambah koordinat kembali ke carta garis.

Dengan cara ini, kita boleh menggunakan PHP dan Highcharts untuk mencipta carta visualisasi data masa nyata. Kami menggunakan PHP untuk menjana data rawak dan menghantar data ini ke penyemak imbas dalam masa nyata. Kemudian gunakan objek EventSource dalam JavaScript untuk membalas data ini dan gambarkan data ke dalam carta garis melalui Highcharts. Dengan cara ini, kami boleh membenarkan pengguna melihat perubahan dalam data dalam masa nyata, dengan itu meningkatkan kecekapan data boleh dianalisis pengguna.

Atas ialah kandungan terperinci Buat carta visualisasi data masa nyata menggunakan PHP dan Highcharts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!