gremo/highcharts-bundle

此包已被废弃，不再维护。未建议替代包。

Symfony2 Bundle 用于创建 Highcharts 图表，流畅且尽可能少使用 JavaScript。

维护者

详细信息

github.com/gremo/GremoHighchartsBundle

源代码

问题

安装数量: 3,081

依赖关系: 0

建议者: 0

安全: 0

星标: 19

关注者: 3

分支: 6

开放问题: 1

类型:symfony-bundle

v1.0.3 2013-10-01 19:07 UTC

Requires

MIT 30163271e8783820fe71a79dfd4ad62070c6ab1f

chartshighcharts

This package is not auto-updated.

Last update: 2020-01-24 14:49:41 UTC

README

Build status GitHub issues Latest stable Downloads total

Symfony2 Bundle 用于创建 Highcharts 图表，流畅且尽可能少使用 JavaScript。

安装

将以下内容添加到您的 deps 文件中（用于 Symfony 2.0.*）

[GremoHighchartsBundle]
    git=https://github.com/gremo/GremoHighchartsBundle.git
    target=bundles/Gremo/HighchartsBundle

然后使用自动加载器注册命名空间（app/autoload.php）

$loader->registerNamespaces(array(
    // ...
    'Gremo' => __DIR__.'/../vendor/bundles',
    // ...
));

或者，如果您正在使用 Composer 和 Symfony 2.1.*，请将以下内容添加到 composer.json 文件中

{
    "require": {
        "gremo/highcharts-bundle": "*"
    }
}

最后，在 app/appKernel.php 中将包注册到您的内核中

public function registerBundles()
{
    $bundles = array(
        // ...
        new Gremo\HighchartsBundle\GremoHighchartsBundle(),
        // ...
    );

    // ...
}

配置

参见 选项提供者。

定义图表

首先从服务容器中获取 gremo_highcharts 服务

/** @var $highcharts \Gremo\HighchartsBundle\Highcharts */
$highcharts = $this->get('gremo_highcharts');

创建图表对象

gremo_highcharts 服务中为每种图表类型提供了一个方法

$highcharts->newAreaChart();
$highcharts->newAreaSplineChart();
$highcharts->newBarChart();
$highcharts->newColumnChart();
$highcharts->newLineChart();
$highcharts->newPieChart();
$highcharts->newScatterChart();
$highcharts->newSplineChart();

$highcharts->newAreaRangeChart();
$highcharts->newAreaSplineRangeChart();
$highcharts->newColumnRangeChart();

最后三种图表类型需要 highcharts-more.js。对于“特殊”图表（如组合多个图表），可以使用通用的 newChart() 方法。

设置和获取属性

图表、坐标轴、序列和复杂数据点都提供了魔法方法 setXxx（设置简单属性）、newXxx（创建嵌套属性）、getXxx（获取属性）。字符串部分 Xxx 在设置属性之前将被转换为 xxx。

设置器 setXxx 是流式的，并返回实例，而 newXxx 方法返回嵌套属性本身。使用 getParent() 获取父对象

$chart = $highcharts->newLineChart()
   ->newChart()
       ->setRenderTo('chart-container')
   ->getParent()
   ->newTitle()
       ->setText('My chart')
       ->newStyle()
           ->setColor('#FF00FF')
           ->setFontWeight('bold')
       ->getParent()
   ->getParent();

echo $chart;

将导致以下结果

{
   "chart" : {
       "renderTo": "chart-container"
   },
   "title" : {
       "text": "My Chart",
       "style": {
           "color": "#FF00FF",
           "fontWeight": "bold"
       }
   }
}

请参考 Highcharts API 参考文档 和 Highcharts 示例页面 以控制图表的行为。

创建坐标轴、序列和点

图表对象有 newXAxis()、newYAxis() 和 newSeries() 方法，用于创建和向图表添加坐标轴和序列。这些方法返回嵌套属性本身，并且工作方式完全相同

$chart = $highcharts->newBarChart()
    ->newXAxis()
        ->setCategories(array('Africa', 'America', 'Asia', 'Europe', 'Oceania'))
        ->newTitle()
            ->setText(null)
        ->getParent()
    ->getParent()
    ->newYAxis()
        ->setMin(0)
        ->newTitle()
            ->setText('Population (millions)')
            ->setAlign('high')
        ->getParent()
        ->newLabels()
            ->setOverflow('justify')
        ->getParent()
    ->getParent();

对于实际上将数据添加到图表中，您可以使用 newValue($value)、newPoint($x, $y) 和 newComplexPoint()

$chart->newSeries()
    ->newComplexPoint()
        ->setName('Point 1')
        ->setColor('#00FF00')
        ->setY(0)
    ->getParent()
    ->newComplexPoint()
        ->setName('Point 2')
        ->setColor('#FF00FF')
        ->setY(5)
    ->getParent();

或者，您可以直接使用 setData(array $data) 方法设置数据。

newValue($value)、newPoint($x, $y) 和 setData(array $data) 方法返回序列，而 newComplexPoint() 返回点本身，用于链式调用后续操作。值、点和复杂数据点在 此处 进行说明。

选项提供者

使用选项提供者定义的属性适用于所有图表。定义一个服务，添加 gremo_highcharts.options_provider 标签并实现 Gremo\HighchartsBundle\Provider\OptionsProviderInterface 接口，在 getOptions() 方法中返回默认选项的 array。

use Gremo\HighchartsBundle\Provider\OptionsProviderInterface;
use JMS\DiExtraBundle\Annotation as DI;

/**
 * @DI\Service("my_options_provider")
 * @DI\Tag("gremo_highcharts.options_provider", attributes={"priority"=10})
 */
class MyOptionsProvider implements OptionsProviderInterface
{
    /**
     * @return array
     */
    public function getOptions()
    {
        return array(
            'colors' => array(
                '#058DC7',
                '#50B432',
                '#ED561B',
                '#DDDF00',
                '#24CBE5',
                '#64E572',
                '#FF9655',
                '#FFF263',
                '#6AF9C4',
            )
        );
    }
}

未能返回 array 类型将抛出异常。

优先级更高的提供者将（优雅且递归地）覆盖优先级较低的提供者的选项。有关实际使用默认选项的信息，请参阅渲染图表。优先级属性不是必需的。

内置选项提供者

为了设置常用选项，此软件包提供了一些内置选项提供者。如果您对默认选项满意，可以使用简短形式（适用于每个提供者）

gremo_highcharts:
    options_providers:
        credits_disabler: ~
        lang: ~
        locale: ~
        # ...

credit_disabler：将 Highcharts 的版权信息设置为关闭。

gremo_highcharts:
    options_providers:
        # ...
        credits_disabler:
            enabled: true

lang：使用 Symfony 2 翻译系统提供对 lang 字符串 的翻译。

gremo_highcharts:
    options_providers:
        # ...
        lang:
            enabled: true
            messages_domain: mydomain # default to gremo_highcharts

键引用及默认值

downloadJPEG: Download JPEG image
downloadPDF: Download PDF document
downloadPNG: Download PNG image
downloadSVG: Download SVG vector image
exportButtonTitle: Export to raster or vector image
loading: Loading...
months:
    january: January
    february: February
    march: March
    april: April
    may: May
    june: June
    july: July
    august: August
    september: September
    october: October
    november: November
    december: December
printButtonTitle: Print the chart
resetZoom: Reset zoom
resetZoomTitle: Reset zoom level 1:1
shortMonths:
    jan: Jan
    feb: Feb
    mar: Mar
    apr: Apr
    may: May
    jun: Jun
    jul: Jul
    aug: Aug
    sep: Sep
    oct: Oct
    nov: Nov
    dic: Dic
weekdays:
    sunday: Sunday
    monday: Monday
    tuesday: Tuesday
    wednesday: Wednesday
    thursday: Thursday
    friday: Friday
    saturday: Saturday

locale：根据当前区域设置提供小数点和千位分隔符，使用 PHP intl 扩展。

gremo_highcharts:
    options_providers:
        # ...
        locale:
            enabled: true

渲染图表

首先，将图表传递到您的模板中

public function showAction()
{
    // Chart building...

    return $this->render(
        'AcmeHelloBundle:Hello:chart.html.twig',
        array('chart' => $chart)
    );
}

然后在您的 AcmeHelloBundle:Hello:chart.html.twig 模板中导入 jQuery 以及 Highcharts JavaScript 文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Highcharts Example</title>
        {% javascripts
            '@AcmeHelloBundle/Resources/public/js/jquery.js'
            '@AcmeHelloBundle/Resources/public/js/highcharts.js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
        {% endjavascripts %}
    </head>
    <body>
        <!-- Chart options and initialization -->
        <div id="chart-container"></div>
    </body>
</html>

请注意，jQuery 库仅用于在 DOM 准备就绪后创建图表。

最后初始化图表

<!-- Chart options and initialization -->
<script type="text/javascript">
    Highcharts.setOptions({% render 'gremo_highcharts:getOptions' %});

    $(function() {
        $(document).ready(function() {
            new Highcharts.Chart({{ chart|raw }});
        });
    })(jQuery);;
</script>

如果您没有使用任何选项提供者，可以省略 Highcharts.setOptions()。

限制

由于 JavaScript 闭包无法序列化，因此无法使用此库直接将属性定义为回调（例如，当您需要自定义 工具提示格式化程序 时）。

这必须在 JavaScript 中直接完成

<script type="text/javascript">
    // ...

    $(function() {
        $(document).ready(function() {
            var options = {{ chart|raw }};

            options.tooltip = {
                formatter: function() {
                    return 'The value for <b>'+ this.x + '</b> is <b>'+ this.y +'</b>';
                }
            };

            new Highcharts.Chart(options);
        });
    })(jQuery);
</script>

计划中的功能

  • 添加一个选项提供者，用于从 JSON 文件中加载选项（例如，Highcharts 主题、JSON 文件）
  • 找出打印选项和图表的更好方法（可能是 Twig 扩展）
  • 添加用于多个轴和组合图表的辅助方法
  • 添加一个用于定义可重用图表模板的构建系统