正文

轻松掌握PHP图表制作：盘点热门图表库及其支持格式全解析

/0 浏览量
0629

在Web开发中，图表是展示数据的一种有效方式。PHP作为服务器端脚本语言，在生成图表方面有着广泛的应用。本文将为您盘点一些热门的PHP图表库，并详细解析它们支持的各种图表格式。

一、PHP图表库概述

PHP图表库可以帮助开发者轻松地将数据转换为图表，从而在网页上展示。以下是一些常用的PHP图表库：

  1. JPGraph
  2. pChart
  3. Chart.js
  4. Highcharts
  5. Google Charts

二、JPGraph

JPGraph是一个功能强大的PHP图表库，支持多种图表类型，如折线图、柱状图、饼图等。它支持以下格式：

  • PNG
  • JPEG
  • GIF
  • PDF

示例代码：

<?php
$graph = new Graph(500, 200);
$graph->SetScale("textlin");

$graph->AddLinePlot(new LinePlot(array(1, 3, 4, 10, 12)));
$graph->AddLinePlot(new LinePlot(array(2, 3, 5, 9, 11)));

$graph->Stroke();
?>

三、pChart

pChart是一个开源的PHP图表库，支持多种图表类型，如折线图、柱状图、饼图、雷达图等。它支持以下格式：

  • PNG
  • JPEG
  • GIF
  • PDF

示例代码：

<?php
$myPicture = new picGraph(700, 200);
$myPicture->setGraphArea(50, 30, 650, 180);
$myPicture->drawScale();
$myPicture->drawLegend(650, 15, 270, 250, "left", "center");

$Data = array(1, 3, 4, 10, 12);
$myPicture->drawLineChart(100, 30, 600, 180, $Data);

$myPicture->stroke();
?>

四、Chart.js

Chart.js是一个简单易用的JavaScript图表库，但也可以与PHP结合使用。它支持以下格式：

  • Canvas
  • SVG

示例代码：

<?php
$chartData = array(
    array('Data1', 30),
    array('Data2', 80),
    array('Data3', 60),
    array('Data4', 90),
    array('Data5', 70)
);

$chartLabels = array_map(function ($item) {
    return $item[0];
}, $chartData);

$chartValues = array_map(function ($item) {
    return $item[1];
}, $chartData);
?>
<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="myChart"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: <?php echo json_encode($chartLabels); ?>,
            datasets: [{
                label: 'Dataset 1',
                data: <?php echo json_encode($chartValues); ?>,
                backgroundColor: 'rgba(0, 123, 255, 0.5)',
                borderColor: 'rgba(0, 123, 255, 1)',
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
</script>

五、Highcharts

Highcharts是一个功能强大的JavaScript图表库，也可以与PHP结合使用。它支持以下格式：

  • Canvas
  • SVG

示例代码：

<?php
$chartData = array(
    array('Data1', 30),
    array('Data2', 80),
    array('Data3', 60),
    array('Data4', 90),
    array('Data5', 70)
);

$chartLabels = array_map(function ($item) {
    return $item[0];
}, $chartData);
?>
<div id="container" style="height: 400px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script>
    Highcharts.chart('container', {
        chart: {
            type: 'bar'
        },
        title: {
            text: 'Bar Chart'
        },
        xAxis: {
            categories: <?php echo json_encode($chartLabels); ?>
        },
        yAxis: {
            title: {
                text: 'Values'
            }
        },
        series: [{
            name: 'Series 1',
            data: <?php echo json_encode($chartValues); ?>
        }]
    });
</script>

六、Google Charts

Google Charts是一个基于Web的图表库，可以通过JavaScript或PHP调用。它支持以下格式：

  • Canvas
  • SVG

示例代码：

<?php
$chartData = array(
    array('Data1', 30),
    array('Data2', 80),
    array('Data3', 60),
    array('Data4', 90),
    array('Data5', 70)
);

$chartLabels = array_map(function ($item) {
    return $item[0];
}, $chartData);
?>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script type="text/javascript" src="https://www.google.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages': ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Task', 'Hours per Day'],
            <?php echo implode(',', array_map(function ($item) {
                return "['{$item[0]}', {$item[1]}]";
            }, $chartData)); ?>
        ]);

        var options = {
            title: 'Hours per Day',
            vAxis: {title: 'Hours'},
            hAxis: {title: 'Task'}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

七、总结

以上介绍了几个常用的PHP图表库及其支持格式。选择合适的图表库可以帮助您更轻松地制作图表，展示数据。希望本文对您有所帮助！

-- 展开阅读全文 --