README

使用 MukadiChartJsBundle 直接从ORM实体构建出色的图表，创建直接映射到您数据模型的高质量图表。 MukadiChartJsBundle 是为 symfony 定制的 mukadi/chartjs-builder 包，以下是一些提供的功能

• 一个用于从DQL查询和原生SQL查询构建图表的服务
• 一个用于在视图中渲染图表的 Twig 扩展

安装

通过运行以下命令通过 composer 安装包

php composer.phar require mukadi/chartjs-bundle

然后运行 php bin/console assets:install 以在公共网页目录中安装资源

图表工厂

该包提供 Mukadi\ChartJSBundle\Factory\ChartFactory 服务（如果您不使用自动装配，则为 @mukadi.chart.factory）

您可以使用图表工厂像使用任何其他 symfony 服务一样

namespace App\Controller;

use App\Chart\VideoGame;
use Mukadi\ChartJSBundle\Factory\ChartFactory;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;

class AppController extends AbstractController{

    #[Route('/', name: 'app_app')]
    public function index(ChartFactory $factory): Response {
        $chart = $factory
                ->withDql() # if you plan to use DQL query
                ->createChartBuilder()
                ->asBar()
                    ->query("SELECT COUNT(j) total, AVG(j.prix) prix, j.console console FROM \App\Entity\VideoGame j group by j.console")
                    ->labels('console')
                    ->dataset("Prix moyen")
                        ->data('prix')->useRandomBackgroundColor()
                    ->end()
                    ->dataset("Nombre")
                        ->data('total')->useRandomBackgroundColor()
                    ->end()
                ->build()
                ->getChart()
                ;

        $chart2 = $factory
                ->withNativeSql() # if you gonna use native SQL query
                ->createChartBuilder()
                ->asBar()
                    ->query("SELECT COUNT(*) total, AVG(prix) prix, console FROM jeux_video GROUP BY console")
                    ->labels('console')
                    ->dataset("Prix moyen")
                        ->data('prix')->useRandomBackgroundColor()
                    ->end()
                    ->dataset("Nombre")
                        ->data('total')->useRandomBackgroundColor()
                    ->end()
                ->build()
                ->getChart()
                ;

        return $this->render('app/index.html.twig', [
            'chart' => $chart,
            'chart2' => $chart2,
        ]);
    }
}

如果您想了解更多关于图表构建的信息，请参阅 mukadi/chartjs-builder 文档。

在 Twig 模板中渲染图表

在 twig 模板中使用专门的函数进行图表渲染

{{ mukadi_chart(chart) }}

不要忘记在您的页面上包含库

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.min.js"></script>
<script src="/bundles/mukadichartjs/mukadi.chart.min.js"></script>

这就完成了！

使用图表定义

图表定义是构建图表的一种优雅方式，将它们构建在独立的类中，因此您可以得到更易于阅读的代码，并且还可以重用图表（当与参数化查询结合使用时，这是一个非常强大的功能）。有关图表定义的更多信息，请参阅核心 mukadi/chartjs-builder 库。

通过实现 Mukadi\Chart\ChartDefinitionInterface 接口创建您的图表

namespace App\Chart;

use Mukadi\Chart\ChartDefinitionBuilderInterface;
use Mukadi\Chart\ChartDefinitionInterface;

class VideoGameChart implements ChartDefinitionInterface {
    
    public function define(ChartDefinitionBuilderInterface $builder): void
    {
        $sql = "SELECT COUNT(*) total, AVG(prix) prix, console FROM jeux_video WHERE possesseur = :possesseur GROUP BY console";

        $builder
            ->asPolarArea()
            ->query($sql)
            ->labels('console')
            ->dataset("Total")
                ->data('total')->useRandomBackgroundColor()
            ->end()
            ->dataset("Prix moyen")
                ->data('prix')->useRandomBackgroundColor()
            ->end()
        ;
    }
}

在您的控制器中，您只需编写以下内容

 $chart = $factory
                ->withNativeSql()
                ->createFromDefinition(VideoGameChart::class)
                ->setParameter(':possesseur', 'Michel')
                ->getChart()
                ;

注意：您只能在类由 DI 组件管理的情况下使用图表定义的 FCQN，如果您使用标准的 symfony services.yml 文件，则它将自动为您处理，如果您不这样做，您必须自己处理。