ejdamm/chart.js-php

Chart.js 的 PHP 封装。

维护者

详细信息

github.com/Ejdamm/Chart.js-PHP

主页

源代码

问题

安装数: 7,405

依赖者: 0

建议者: 0

安全: 0

星标: 37

关注者: 7

分支: 14

v2.0 2018-03-10 08:51 UTC

Requires

  • php: >=5.6

Requires (Dev)

MIT 1caa5f9daa1eb4deb97edc8caae59c40d672f46b

This package is auto-updated.

Last update: 2024-09-20 07:04:59 UTC

README

Build Status

这是一个针对 chartjs/Chart.js 的 PHP 封装。该项目是对 HugoHeneault's 仓库的扩展。

使用方法

在您的 body 结束前包含 js/Chart.min.js 和 js/driver.js（根据您的项目更改 src）。如果您想使用 CDN，请参阅[此处](. CDN 相关信息请参阅此处 https://cdnjs.com/libraries/Chart.js)

<html>
  <body>
    <!-- Your awesome project comes here -->

    <!-- And here are Chart.js -->
    <script src="js/Chart.min.js"></script>
    <script src="js/driver.js"></script>
  </body>
</html>

通过 composer 安装 ChartJS-PHP

{
    "repositories": [
        {
            "type": "git",
            "url": "https://github.com/Ejdamm/Chart.js-PHP"
        }],
    "require": {
        "ejdamm/chart.js-php": "dev-master"
    }
}

然后，使用 PHP 创建您的图表。

$data = [
    'labels' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    'datasets' => [[
        'data' =>[8, 7, 8, 9, 6],
        'backgroundColor' => '#f2b21a',
        'borderColor' => '#e5801d',
        'label' => 'Legend'
    ]]
];
$options = [];
$attributes = ['id' => 'example', 'width' => 500, 'height' => 500];
$Line = new ChartJs\ChartJS('line', $data, $options, $attributes);

// Echo your line
echo $Line;
?>

最后，当文档准备好时，用一小段 JavaScript 加载这些图表

// Pure JS document.ready
(function() {
  loadChartJsPhp();
})();

完整示例

<?php
require 'vendor/autoload.php';
use ChartJs\ChartJS;

$data = [
    'labels' => ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
    'datasets' => [[
        'data' =>[8, 7, 8, 9, 6],
        'backgroundColor' => '#f2b21a',
        'borderColor' => '#e5801d',
        'label' => 'Legend'
    ]]
];
$options = ['responsive' => false];
$attributes = ['id' => 'example', 'width' => 500, 'height' => 500];
$Line = new ChartJS('line', $data, $options, $attributes);

?><!DOCTYPE html>
<html>
  <head>
    <title>Chart.js-PHP</title>
  </head>
  <body>
    <?php
      echo $Line;
    ?>
    <script src="vendor/Ejdamm/Chart.js-PHP/js/Chart.min.js"></script>
    <script src="vendor/Ejdamm/Chart.js-PHP/js/driver.js"></script>
    <script>
      (function() {
        loadChartJsPhp();
      })();
    </script>
  </body>
</html>

文档

完整的文档可在 Chart.js 网站上找到。在那里您可以找到可用的图表类型及其相关属性。

时间轴

如果您要使用时间轴，则需要将 Moment.js 或 Chart.bundle.js（包含 Chart.js 和 Moment.js）包含到您的项目中，而不是使用 Chart.js。

贡献

请勿犹豫，用 bugfix 和新功能改进我的代码！