PHP + Highcharts 打造動態統計圖表：從數據輸出到前端渲染全流程

核心思路：後端輸出 JSON，前端 Highcharts 渲染

Highcharts 是純 JavaScript 圖表庫，支援折線圖、餅圖、柱狀圖等多種類型。PHP 負責從數據庫或系統接口獲取數據，經 json_encode 輸出標準格式，前端通過 AJAX 請求獲取並渲染。

關鍵數據結構：series.data 支援兩種格式

// 簡單陣列格式
data: [['Firefox', 45.0], ['IE', 26.8], ['Safari', 8.5]]

// 物件格式（支援更多屬性如 sliced、selected）
data: [{
  name: 'Chrome',
  y: 12.8,
  sliced: true,
  selected: true
}]

完整前端頁面範例（餅圖）

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>動態統計圖表示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
  <div id="container" style="width:100%; height:400px;"></div>

  <script>
  $(function () {
    // 1. 從後端獲取數據
    $.getJSON('api/area_data.php', function (ds) {
      // 2. 美化顏色（漸變效果）
      Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function (color) {
        return {
          radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
          stops: [[0, color], [1, Highcharts.Color(color).brighten(-0.3).get('rgb')]]
        };
      });

      // 3. 初始化圖表
      $('#container').highcharts({
        chart: { type: 'pie', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false },
        title: { text: '地區訪問分佈統計' },
        tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000',
              connectorColor: '#000',
              formatter: function () { return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(1) +' %'; }
            }
          }
        },
        series: [{ name: '訪問來源', data: ds }]
      });
    });
  });
  </script>
</body>
</html>

後端 PHP 輸出 JSON（api/area_data.php）

<?php
// 示例：從系統 /proc/net/dev 讀取網卡流量並轉換為 MB
$strs = @file("/proc/net/dev");
$arr = [];
if ($strs) {
  for ($i = 2; $i < count($strs); $i++) {
    preg_match_all("/([^\s]+):[\s]{0,}(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)\s+(\d+)/", $strs[$i], $info);
    $name = $info[1][0];
    $in_mb  = round($info[2][0] / 1024 / 1024, 2);
    $out_mb = round($info[10][0] / 1024 / 1024, 2);
    $arr[] = ['name' => $name, 'y' => $in_mb + $out_mb]; // 簡單合併入站+出站
  }
}
header('Content-Type: application/json; charset=utf-8');
echo json_encode($arr);

輸出示例

[{"name":"lo","y":0},{"name":"eth0","y":0.4073}]

進階應用：多系列數據（入站/出站分離）

// 後端輸出
$arr[$i]["name"] = $info[1][0];
$arr[$i]["data"][0] = $in_mb;
$arr[$i]["data"][1] = $out_mb;
// 前端 series 配置
series: [{
  name: '入站流量',
  data: ds.map(item => [item.name, item.data[0]])
}, {
  name: '出站流量',
  data: ds.map(item => [item.name, item.data[1]])
}]

總結

PHP + Highcharts 組合實現了「後端只負責數據，前端只負責展示」的乾淨架構。關鍵在於：後端輸出標準 JSON，前端靈活映射 series.data 結構，善用 Highcharts 豐富的配置選項實現交互、動畫、導出等高級功能。