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 Demo、Highstock Demo和Highmaps Demo页面中所示。

技巧

从v10版本开始，此扩展使用Asset Packagist来加载所需的高图表资产，因此直到下一个主要版本发布，您无需更改您的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 Widget 示例。

miloschuman / yii2-highcharts-widget

维护者

详细信息