Yii 2.0: yii2-highcharts-widget创建饼状图

安装

The preferred way to install this extension is through composer.

项目根目录下执行：

php composer.phar require --prefer-dist miloschuman/yii2-highcharts-widget "*"

或者在composer.json中添加

"miloschuman/yii2-highcharts-widget": "*"

后执行composer update.

使用

在view视图中使用该widget：

use miloschumanhighchartsHighcharts;

描绘饼状图（此处有两种写法，options中的参数可以为数组形式也可以为json格式，格式大致与highcharts中的例子：http://www.hcharts.cn/test/index.php?from=demo&p=39 格式对应）：

                   echo Highcharts::widget([
                        'options'=>'{
                            "chart": {
                                "plotBackgroundColor": null,
                                "plotBorderWidth": null,
                                "plotShadow": false
                            },
                            "title": {
                                "text": "Browser market shares at a specific website, 2010"
                            },
                            "tooltip": {
                                "pointFormat": "{series.name}: <b>{point.percentage:.1f}%</b>"
                            },
                            "plotOptions": {
                                "pie": {
                                    "allowPointSelect": true,
                                    "cursor": "pointer",
                                    "dataLabels": {
                                        "enabled": true,
                                       "color": "#000000",
                                        "connectorColor": "#000000",
                                        "format": "<b>{point.name}</b>: {point.percentage:.1f} %"
                                    }
                                }
                            },
                            "series": [{
                        "type": "pie",
                               "name": "Browser share",
                                "data": [
                            ["Firefox",   45.0],
                            ["IE",       26.8],
                                    {
                                        "name": "Chrome",
                                        "y": 12.8,
                                        "sliced": true,
                                        "selected": true
                                    },
                                    ["Safari",    8.5],
                                    ["Opera",     6.2],
                                    ["Others",   0.7]
                                ]
                            }]
                        }'
                    ]);