agy-koala/yii2-highcharts-widget

为 Yii 2 框架提供 Highcharts 小部件。

安装: 646

依赖: 0

建议者: 0

安全: 0

星标: 0

关注者: 0

分支: 62

类型:yii2-extension

v6.1.1 2018-12-06 15:54 UTC

README

Latest Stable Version Total Downloads Scrutinizer Code Quality

轻松地将 Highcharts、Highstock 和 Highmaps 图表添加到您的 Yii2 应用程序中。

Screen Shot

关于

Highcharts

轻松地为您的 Web 项目创建交互式图表。由成千上万的开发者使用,包括世界前100大公司中的59家,Highcharts 是市场上最简单且最灵活的图表 API。

Highstock

Highstock 允许您使用纯 JavaScript 创建股票或通用时间线图表。包括诸如小导航系列、预设日期范围、日期选择器、滚动和缩放等复杂的导航选项。

Highmaps

构建交互式地图,用于显示销售、选举结果或其他与地理位置相关的信息。非常适合独立使用或在仪表板中使用,与 Highcharts 一起使用!

安装

安装此扩展的首选方式是通过 composer

运行以下命令

php composer.phar require miloschuman/yii2-highcharts-widget

或在您的 composer.json 文件的 require 部分添加以下内容

"miloschuman/yii2-highcharts-widget": "^6.0"

用法

首选方法(使用 PHP 数组)

要使用此小部件,将以下代码插入到视图文件中

use miloschuman\highcharts\Highcharts;

echo Highcharts::widget([
   'options' => [
      'title' => ['text' => 'Fruit Consumption'],
      'xAxis' => [
         'categories' => ['Apples', 'Bananas', 'Oranges']
      ],
      'yAxis' => [
         'title' => ['text' => 'Fruit eaten']
      ],
      'series' => [
         ['name' => 'Jane', 'data' => [1, 0, 4]],
         ['name' => 'John', 'data' => [5, 7, 3]]
      ]
   ]
]);

通过配置 options 属性,您可以指定需要传递给 Highcharts JavaScript 对象的选项。请参考 Highcharts 网站上的演示画廊和文档 以获取可能的选项。

有关更多用法示例,请参阅 /doc/examples

备选方法(使用 JSON 字符串)

或者,您可以使用有效的 JSON 字符串代替关联数组来指定选项

use miloschuman\highcharts\Highcharts;

echo Highcharts::widget([
   'options'=>'{
      "title": { "text": "Fruit Consumption" },
      "xAxis": {
         "categories": ["Apples", "Bananas", "Oranges"]
      },
      "yAxis": {
         "title": { "text": "Fruit eaten" }
      },
      "series": [
         { "name": "Jane", "data": [1, 0, 4] },
         { "name": "John", "data": [5, 7,3] }
      ]
   }'
]);

注意:当使用第二种选项时,您必须提供一个 有效的 JSON 字符串(使用双引号)。您可以使用 JSONLint 在线快速验证您的 JSON 字符串。

仅包含资产

如果您只想在视图中包含 Highcharts/Highstock/Highmaps JavaScript 库,则可以绕过小部件并直接访问资产包

use miloschuman\highcharts\HighchartsAsset;

HighchartsAsset::register($this)->withScripts(['highstock', 'modules/exporting', 'modules/drilldown']);

在这种情况下,您需要编写并包含自己的 JavaScript 来显示图表,就像在 Highcharts 演示Highstock 演示Highmaps 演示 页面上所展示的那样。

技巧

  • 如果您需要在任何配置选项中使用 JavaScript,请使用 Yii 的 [[JsExpression]] 对象。例如

    ...
    'tooltip' => [
       'formatter' => new JsExpression('function(){ return this.series.name; }')
    ],
    ...

    注意,这目前仅在使用 PHP 关联数组(首选方法)进行配置时才可行。

  • Highcharts 默认在图表的右下角显示一个小版权标签。您可以使用以下顶级选项来删除它。

    ...
    'credits' => ['enabled' => false],
    ...
  • 必须通过顶级 'scripts' 选项启用所有适配器、模块、主题和补充图表类型。

    ...
    'scripts' => [
       'highcharts-more',   // enables supplementary chart types (gauge, arearange, columnrange, etc.)
       'modules/exporting', // adds Exporting button/menu to chart
       'themes/grid'        // applies global 'grid' theme to all charts
    ],
    ...

    有关可用脚本的列表,请参阅 vendor/bower/highcharts/ 的内容。

  • 您可以从其他脚本中这样访问 JavaScript 图表对象

    var chart = $('#my-chart-id').highcharts();

    其中 my-chart-id 通过顶层 id 配置选项设置。只需确保在组件声明之后注册您的脚本,以便它有机会初始化。

  • 顶层 'callback' 选项允许您在 AJAX 请求或其他预处理之后初始化图表。请参阅包含的 Highstock 组件示例 了解用法。