README

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

关于

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": "^8.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(['modules/stock', 'modules/exporting', 'modules/drilldown']);

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

提示

从 v10 版本开始，此扩展使用 Asset Packagist 加载所需的 Highcharts 资产，因此直到下一个主要版本发布，您无需在 composer.json 文件中更改版本号。

如果您是从 v9.0 或更早版本升级，您需要在 composer.json 文件中添加以下内容
```
"repositories": [
  {
    "type": "composer",
    "url": "https://asset-packagist.org"
  }
]
```
确保在您的 composer.json 文件中禁用了之前使用的 fxp/composer-asset-plugin
```
"config": {
  "fxp-asset": {
    "enabled": false
  }
}
```
然后运行 composer update 以安装新资产。
如果您需要在任何配置选项中使用 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/npm/highcharts/ 目录的内容。

您可以通过以下方式从另一个脚本访问 JavaScript 图表对象
```
var chart = $('#my-chart-id').highcharts();
```
其中 my-chart-id 通过顶级 id 配置选项设置。只需确保在组件声明后注册您的脚本，以便它有机会初始化。
顶级 'callback' 选项允许您在 AJAX 请求或其他预处理后初始化图表。有关用法，请参阅包含的 Highstock 小部件示例。

marqu3s / yii2-highcharts-widget

维护者

详细信息