PHP を使用して Web データを視覚化する方法

Web アプリケーションがデータ処理とプレゼンテーションに使用されることが増えるにつれ、データの視覚化がますます重要になっています。データを視覚化することで、ユーザーは有益な情報をより深く理解し、発見できるようになります。 PHP は一般的に使用される Web 開発言語であり、データ視覚化に利用できるツールやライブラリが多数あります。この記事では、PHP を使用して Web データを視覚化する方法について詳しく説明します。

1. Chart.js を使用してグラフを作成する

Chart.js は、シンプルで動的なグラフを作成するための人気のある JavaScript ライブラリです。データの視覚化は、PHP と Chart.js を使用して Web サイト上で簡単に作成できます。 Chart.js の使用を開始するには、まずそれを HTML にインポートする必要があります。これは、次のコードで実現できます。

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

次に、PHP を使用してデータベースからデータを取得し、JavaScript に渡してグラフを作成します。簡単な例を次に示します。

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = $row['value'];
}
?>

<script>
//将数据传递给JavaScript
var data = <?php echo json_encode($data); ?>;

//创建图表
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
        datasets: [{
            label: 'Data',
            data: data,
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
</script>

この例では、データベースから取得したデータを使用して縦棒グラフを作成し、JavaScript を使用してそれを視覚化します。データを JavaScript 構文に変換するには、PHP の json_encode() 関数を使用することに注意してください。

2. Google Charts を使用してグラフを作成する

Google Charts は、さまざまなグラフの種類とカスタマイズ オプションを提供する無料の Web ライブラリです。 PHP および Google Chart を使用して、インタラクティブで高度にカスタマイズされたグラフを作成できます。 Google チャートの使用を開始するには、HTML に次のコードを導入する必要があります。

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

次に、PHP を使用してデータベースからデータを取得します。次に、JavaScript を使用して視覚化オブジェクトを作成し、データをグラフ オブジェクトに追加します。簡単な例を次に示します。

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array($row['month'], (int)$row['sales']);
}
?>

<script>
//加载图表库
google.charts.load('current', {'packages':['corechart']});

//设置回调函数
google.charts.setOnLoadCallback(drawChart);

//绘制图表
function drawChart() {
  //创建数据表格
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Month');
  data.addColumn('number', 'Sales');
  data.addRows(<?php echo json_encode($data); ?>);

  //设置选项
  var options = {'title':'Sales Report',
                 'width':400,
                 'height':300};

  //创建图表对象
  var chart = new google.visualization.LineChart(document.getElementById('myChart'));
  chart.draw(data, options);
}
</script>

この例では、PHP を使用してデータベースからデータを取得し、Google Chart オブジェクトに追加します。折れ線プロットを作成し、 json_encode() 関数を使用してデータを JavaScript 構文に変換します。

3. D3.js でビジュアライゼーションを作成する

D3.js は、高度にカスタマイズされたデータのビジュアライゼーションを作成するための人気のある JavaScript ライブラリです。前の 2 つのライブラリとは異なり、D3.js はより複雑なツールですが、非常に複雑でインタラクティブなグラフや視覚化を作成できます。 D3.js の使用を開始するには、HTML に次のコードを導入する必要があります。

<script src="https://d3js.org/d3.v5.min.js"></script>

次に、PHP を使用してデータベースからデータを取得します。次に、D3.js を使用して視覚化オブジェクトを作成し、そのオブジェクトにデータを追加します。簡単な例を次に示します。

<?php
//从数据库中检索数据
$data = array();
while ($row = mysqli_fetch_array($result)) {
    $data[] = array('label' => $row['product_name'], 'value' => (int)$row['sales']);
}
?>

<script>
//设置宽度和高度
var width = 800;
var height = 400;

//创建SVG并设置宽度和高度
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);

//创建Pie图
var pie = d3.pie()
            .value(function(d) { return d.value; })(<?php echo json_encode($data); ?>);

//创建弧线对象
var arc = d3.arc()
            .outerRadius(Math.min(width, height) / 2 - 1)
            .innerRadius(0);

//创建Pie图表
var arcLabel = (() => {
  const radius = Math.min(width, height) / 2;
  return d3.arc().innerRadius(radius).outerRadius(radius);
})();

//创建颜色比例尺
var color = d3.scaleOrdinal().range(d3.schemeCategory10);

//绘制Pie图
var label = d3.arc().outerRadius(radius * 0.8).innerRadius(radius * 0.4);
  pie.forEach(function(d) {
    d.innerRadius = 0;
    d.outerRadius = radius - 40;
    d.color = color(d.data.label);
  });

//根据弧线对象创建路径
var path = svg.selectAll("path")
              .data(pie)
              .enter()
              .append("path")
              .attr("d", arc)
              .attr("fill", function(d) { return d.color; })
              .attr("stroke", "white")
              .style("stroke-width", "2px")
              .style("opacity", 0.7)
              .each(function(d) { this._current = d; });

//添加标签
var label = svg
  .selectAll('.label')
  .data(pie)
  .enter()
  .append('g')
  .attr('class', 'label-group')
  .attr('transform', function(d) {
    var centroid = arc.centroid(d);
    return 'translate(' + [centroid[0] * 1.5, centroid[1] * 1.5] + ')';
  });

label.append('text')
  .attr('class', 'label')
  .text(function(d) {
    return d.data.label;
  })
  .attr('text-anchor', 'middle')
  .style('fill', '#ffffff')
  .style('font-size', '12px');

この例では、PHP を使用してデータベースからデータを取得し、D3.js オブジェクトに追加します。円グラフを作成し、カラー スケールを使用してそれに色を割り当てました。最後に、各セクションの意味を説明するラベルを追加しました。

概要

Web データの視覚化は非常に便利で、ユーザーが大量のデータを処理して理解するのに役立ちます。 Web ビジュアライゼーションは、PHP やさまざまなライブラリやツールを使用して簡単に作成できます。この記事では、Chart.js、Google Charts、D3.js を使用してビジュアライゼーションを作成する方法について説明しました。どのツールを選択する場合でも、PHP を使用すると、データ視覚化プロセスがよりシンプルかつ効率的になります。

以上がPHP を使用して Web データを視覚化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。