README

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

关于

Highcharts

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

Highstock

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

Highmaps

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

链接

注意：Highcharts 仅限非商业用途免费。更多信息，请访问 Highcharts 许可证和定价页面。

要求

Yii 1.1.5 或更高版本
PHP 5.1 或更高版本

安装

在 protected/extensions/ 下提取发布文件

使用方法

要使用此小部件，您可以将以下代码插入视图文件

$this->Widget('ext.highcharts.HighchartsWidget', array(
   'options'=>array(
      'title' => array('text' => 'Fruit Consumption'),
      'xAxis' => array(
         'categories' => array('Apples', 'Bananas', 'Oranges')
      ),
      'yAxis' => array(
         'title' => array('text' => 'Fruit eaten')
      ),
      'series' => array(
         array('name' => 'Jane', 'data' => array(1, 0, 4)),
         array('name' => 'John', 'data' => array(5, 7, 3))
      )
   )
));

通过配置 options 属性，您可以指定需要传递给 Highcharts JavaScript 对象的选项。有关可能的选项，请参阅 Highcharts 网站上的示例画廊和文档。

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

$this->Widget('ext.highcharts.HighchartsWidget', array(
   '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 字符串。

有关更多使用示例，请参阅 /doc/examples

技巧

如果您需要在任何配置选项中使用 JavaScript，请使用 js: 前缀。例如

...
'tooltip' => array(
     'formatter' => 'js:function(){ return this.series.name; }'
),
...

Highcharts 默认在图表的右下角显示一个小版权标签。您可以使用以下顶级选项删除它。
```
...
'credits' => array('enabled' => false),
...
```
从版本 3.0.2 开始，所有适配器、模块、主题和补充图表类型都必须通过顶级 'scripts' 选项启用。
```
...
'scripts' => array(
     '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
),
...
```
早期版本依赖于自动检测魔法，但随着 Highcharts 的发展，这种方法变得不太可靠。新方法更准确地遵循包括/排除附加脚本文件的本地过程，并给用户一些更精细的控制。有关可用脚本的列表，请参阅 protected/extensions/highcharts/assets/ 的内容。
您可以通过以下方式从另一个脚本访问 JavaScript 图表对象
```
var chart = $('#my-chart-id').highcharts();
```
其中 my-chart-id 是通过顶级 id 配置选项设置的。只需确保在声明小部件后注册您的脚本，以便它有机会初始化。

miloschuman / yii-highcharts

维护者

详情

README

关于

Highcharts

Highstock

Highmaps

链接

要求

安装

使用方法

技巧