zoukankan      html  css  js  c++  java
  • 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]
                                    ]
                                }]
                            }'
                        ]);
    

      

      

  • 相关阅读:
    JDK源码分析 – HashMap
    牛哄哄的celery
    redis数据库基础篇
    RPC的入门应用
    Python的常用模块
    消息队列之真知灼见
    面向对象编程(2)
    python3的C3算法
    面向对象编程(1)
    CRM项目之stark组件(2)
  • 原文地址:https://www.cnblogs.com/seafood/p/yii2-highcharts-widget.html
Copyright © 2011-2022 走看看