yii2-highcharts, Yii 2框架的Highcharts小部件

分享于 

6分钟阅读

GitHub

  繁體 雙語
Highcharts widget for Yii 2 Framework
  • 源代码名称:yii2-highcharts
  • 源代码网址:http://www.github.com/miloschuman/yii2-highcharts
  • yii2-highcharts源代码文档
  • yii2-highcharts源代码下载
  • Git URL:
    git://www.github.com/miloschuman/yii2-highcharts.git
    Git Clone代码到本地:
    git clone http://www.github.com/miloschuman/yii2-highcharts
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/miloschuman/yii2-highcharts
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    Yii2 Highcharts小部件

    Latest Stable VersionTotal DownloadsScrutinizer Code Quality

    轻松将 Highcharts,Highstock和 Highmaps 图添加到Yii2应用程序中。

    Screen Shot

    Highcharts

    轻松为你的网络项目创建交互式图表。 Highcharts在世界最大的公司中使用了数万个开发者和 59个世界上最大的公司,Highcharts是最简单但最灵活的图表 API。

    Highstock

    Highstock允许你在纯JavaScript中创建股票或者一般时间线图表。 包括复杂的导航选项,如小型导航系列,预设日期范围,日期选取器,滚动和平移。

    Highmaps

    构建交互式地图以显示销售,选举结果或者任何与地理链接的其他信息。 完美的独立使用或者在仪表板与Highcharts组合 !

    安装

    安装这里扩展的首选方法是通过 Composer

    运行

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

    或者添加

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

    composer.json 文件的要求部分。

    用法

    更喜欢方法( 使用PHP数组)

    要使用这里小部件,请将以下代码插入到视图 file: 中

    usemiloschumanhighchartsHighcharts;echoHighcharts::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对象的选项。 请参考演示库和关于网站的文档for可能的选项。

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

    方法( 使用JSON字符串)

    或者,你可以使用有效的JSON字符串替代关联 array 来指定选项:

    usemiloschumanhighchartsHighcharts;echoHighcharts::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] } ] }']);

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

    只是资产

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

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

    对于这个场景,你需要编写并包含自己的JavaScript来显示图表,如 Highcharts演示插件,Highstock演示插件和Highmaps演示页面中所示。

    提示

    • 如果你需要在任何配置选项中使用 JavaScript,请使用 yii ] 对象的[[JsExpression]。 举个例子:

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

      注意,只有在使用PHP关联 array ( 首选方法 ) 进行配置时,这才是。

    • Highcharts默认情况下在图表的右下角显示一个小的片尾标签。 可以使用下面的顶级选项删除这里选项。

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

      ...'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 配置选项设置的。 只要确保在小部件声明之后 register 就可以使用脚本,这样它就有机会初始化。

    • 顶级 'callback' 选项允许你在AJAX请求或者其他预处理之后初始化图表。 请参见包含 Highstock小部件示例


      framework  HIG  wid  Widget  YII