PHP 中的圆环图(1) - 芒果文档

📌 相关文章

📜 PHP 中的圆环图(1)

📅 最后修改于: 2023-12-03 15:33:36.410000 🧑 作者: Mango

PHP 中的圆环图

圆环图，也称环形图，是数据可视化中常用的一种图形类型。在 PHP 中，可以使用现成的图表库来生成圆环图，例如Google Charts、Highcharts、Chart.js等。

1. Google Charts

Google Charts 是一个免费的图表库，它支持多种类型的图表，包括圆环图。使用 Google Charts 生成圆环图需要引入相应的 JavaScript 库，并按照其 API 进行配置。

以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Google Charts - Pie Chart</title>
  <script type="text/javascript" src="https://www.gstatic.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'],
        ['Work',     11],
        ['Eat',      2],
        ['Commute',  2],
        ['Watch TV', 2],
        ['Sleep',    7]
      ]);

      var options = {
        title: 'My Daily Activities',
        pieHole: 0.5,
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

上述代码中，我们引入了 Google Charts 的 JavaScript 库，然后在 drawChart() 函数中配置了数据和图表样式，最后调用了 google.visualization.PieChart() 函数生成了一个圆环图，并将其渲染到了 HTML 页面中。

2. Highcharts

Highcharts 是一个功能丰富的图表库，它支持多种类型的图表，包括圆环图。使用 Highcharts 生成圆环图需要引入相应的 JavaScript 库，并按照其 API 进行配置。

以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Highcharts - Pie Chart</title>
  <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="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
Highcharts.chart('container', {
    chart: {
        type: 'pie'
    },
    title: {
        text: 'My Daily Activities'
    },
    plotOptions: {
        pie: {
            innerSize: '50%',
            borderWidth: 0,
            dataLabels: {
                enabled: true,
                format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
                distance: -50,
                style: {
                    textOutline: false
                }
            }
        }
    },
    series: [{
        name: 'Brands',
        data: [
            { name: 'Work', y: 61.41 },
            { name: 'Eat', y: 11.84 },
            { name: 'Commute', y: 6.85 },
            { name: 'Watch TV', y: 4.67 },
            { name: 'Sleep', y: 14.77 }
        ]
    }]
});
</script>
</body>
</html>

上述代码中，我们引入了 Highcharts 的 JavaScript 库，然后在 Highcharts.chart() 函数中配置了数据和图表样式，最后将生成的圆环图渲染到了 HTML 页面中。

3. Chart.js

Chart.js 是一个简单、灵活的 HTML5 图表库，它支持多种类型的图表，包括圆环图。使用 Chart.js 生成圆环图需要引入相应的 JavaScript 库，并按照其 API 进行配置。

以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
  <title>Chart.js - Pie Chart</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<div style="width: 400px;">
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Work', 'Eat', 'Commute', 'Watch TV', 'Sleep'],
        datasets: [{
            backgroundColor: [
                '#2ecc71',
                '#3498db',
                '#95a5a6',
                '#9b59b6',
                '#f1c40f'
            ],
            data: [11, 2, 2, 2, 7]
        }]
    },
    options: {
        title: {
            display: true,
            text: 'My Daily Activities'
        },
        cutoutPercentage: 50,
        legend: {
            position: 'bottom'
        }
    }
});
</script>
</div>
</body>
</html>

上述代码中，我们引入了 Chart.js 的 JavaScript 库，然后在 new Chart() 构造函数中配置了数据和图表样式，最后将生成的圆环图渲染到了 HTML 页面中。

结语

以上就是使用 PHP 生成圆环图的介绍。使用图表库可以非常方便地生成各种类型的图表，读者可以根据需要选择适合自己的图表库。