README

Who Charted包扩展了Oro图表包的功能，以便使用Chart.js库。默认情况下，Oro BAP图表包使用flotr2库来绘制图表。此包的目标是添加Chart.js库作为另一个选项。

要求

Who Charted包依赖于Oro BAP，因此具有与Oro BAP相同的所有要求。那些要求可以在这里查看。

• PHP 5.4.4或更高版本
• Oro BAP 1.0或更高版本

安装说明

运行以下命令并继续操作

php /usr/local/bin/composer.phar require "jovial/who-charted"

现在您已准备好更新Composer。

php /usr/local/bin/composer.phar update

Composer更新完成后，您需要清除缓存并安装资产。

php app/console cache:clear

php app/console assets:install

入门

使用Who Charted与使用原生Oro图表服务没有太大区别。您需要设置所有适当的控制器、路由和配置以将小部件添加到仪表板。大部分内容超出了本文档的范围，但可以在这里找到。

首先收集您的数据。

<?php
$data = $this->getDoctrine()
            ->getRepository('YourBundle:YourEntity')
            ->getYourRepoMethod($this->get('oro_security.acl_helper'));

在将数据设置在控件属性上之前，数据必须以特定的格式。对于条形图、堆叠条形图、折线图和雷达图，数据必须如下所示

<?php
array(
    'labels' => array("Label 1", "Label 2", "Label 3"),
    "datasets" => array(
        array('data' => array(100, 200, 300))
    )
);

对于极坐标图、饼图和环形图，数据必须如下所示

<?php
array(
    array('label' => 'Label 1', 'value' => 100),
    array('label' => 'Label 2', 'value' => 200),
    array('label' => 'Label 3', 'value' => 300)
);

接下来，您需要创建一个控件属性。

<?php
$widgetAttr = $this->get('oro_dashboard.widget_configs')->getWidgetAttributesForTwig($widget);

然后，只需调用Who Charted服务并设置数据和选项，即可获取视图。

<?php
$widgetAttr['chartView'] = $this->get('who.charted')
            ->setArrayData($data)
            ->setOptions(
                array(
                    'name' => 'bar_chart',
                    'settings' => array(
                        'colors' => [['fillColor' => 'rgba(222,38,76,.6)', 'strokeColor' => 'rgba(188,13,53,.6)', 'highlightFill' => 'rgba(246,177,195,.6)', 'highlightStroke' => 'rgba(240,120,140,.6)']],
                        'barValueSpacing' => 50,
                        'animation' => true
                    )
                )
            )
            ->getView();

        return $widgetAttr;

在setOptions()方法中，您需要传递您想要使用的图表名称。目前有7种类型可供使用：bar_chart、stacked_bar_chart、line_chart、radar_chart、polar_chart、pie_chart和doughnut_chart。接下来，您可以使用可选的settings数组覆盖图表的任何默认设置。

在settings数组中，您可以使用Chart.js键和可接受值覆盖任何图表类型的默认值。以下是一些可以覆盖的默认值的示例，请参阅Chart.js文档中的条形图... https://chart.js.cn/docs/#bar-chart-chart-options。

settings数组有一个特殊的子数组，允许您指定图表的颜色。如果没有指定颜色，则将使用默认颜色。

整合

src/YourNamespace/Bundle/YourBundle/Controller/Dashboard/DashboardController.php

以下是一个示例仪表板控制器。

<?php

namespace YourNamespace\Bundle\YourBundle\Controller\Dashboard;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\Translation\TranslatorInterface;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;

use Oro\Bundle\WorkflowBundle\Model\WorkflowManager;
use OroCRM\Bundle\SalesBundle\Entity\Repository\SalesFunnelRepository;

class DashboardController extends Controller
{
    /**
     * @Route(
     *      "/your_route/chart/{widget}",
     *      name="your_route_name",
     *      requirements={"widget"="[\w-]+"}
     * )
     * @Template("YourNamespaceYourBundle:Dashboard:exampleChart.html.twig")
     */
    public function exampleChartAction($widget)
    {
        $data = $this->getDoctrine()
            ->getRepository('JovTestBundle:TestEntity')
            ->getOpportunitiesByStatus($this->get('oro_security.acl_helper'));

        $widgetAttr = $this->get('oro_dashboard.widget_configs')->getWidgetAttributesForTwig($widget);

        $widgetAttr['chartView'] = $this->get('who.charted')
            ->setArrayData($data)
            ->setOptions(
                array(
                    'name' => 'bar_chart',
                    'settings' => array(
                        'colors' => [
                            [
                                'fillColor' => 'rgba(222,38,76,.6)',
                                'strokeColor' => 'rgba(188,13,53,.6)',
                                'highlightFill' => 'rgba(246,177,195,.6)',
                                'highlightStroke' => 'rgba(240,120,140,.6)'
                            ]
                        ],
                        'barValueSpacing' => 50,
                        'animation' => true
                    )
                )
            )
            ->getView();

        return $widgetAttr;
    }
}

src/YourNamespace/Bundle/YourBundle/Resources/views/Dashboard/exampleChart.html.twig

以下是一个示例视图文件。

{% extends 'OroDashboardBundle:Dashboard:chartWidget.html.twig' %}

{% block content %}
    {{ chartView.render()|raw }}
{% endblock %}

鸣谢

Sean Gofus | @seangofus