`

Highcharts和Highstock实例(包括折线图,饼图,柱状图)

阅读更多
1. highcharts实例代码,其中导出功能没有配置本地化,用的是官方导出接口。
<html>
    <head>
        <title>highcharts报表示例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="./js/jquery.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: 'line',
                            // 缩放配置: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: '联合图表实例'
                        },

                        
/**
                         * X轴配置
                         * 
                         * @param {array} categories X轴坐标分类值
                         * @param {object} labels 坐标标签配置对象
                         * @param {int} tickInterval 坐标轴的步进值
                         * @param {object} title 坐标轴标题
                         */

                        xAxis: {
                            // X轴分类
                            categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],
                            // 坐标轴的标签
                            labels:{
                                // 标签位置
                                align: 'center',
                                // 标签格式化
                                formatter: function(){
                                    return this.value;
                                },
                                // 标签旋转度数
                                rotation: 20,
                                // 标签交错显示的行数
                                staggerLines: 1
                            },
                            // X轴的步进值,决定隔多少个显示一个
                            tickInterval: 1,
                            // 坐标轴标题
                            title: {
                                text: '水果分类'
                            }
                        },

                        
/**
                         * y轴配置
                         * 
                         * @param {object} labels 坐标标签配置对象
                         * @param {int} tickInterval 坐标轴的步进值
                         * @param {object} title 坐标轴标题
                         */

                        yAxis: {
                            // 坐标轴的标签
                            labels:{
                                // 标签位置
                                align: 'right',
                                // 标签格式化
                                formatter: function(){
                                    return this.value + '个';
                                }
                            },
                            // y轴的步进值,决定隔多少个显示一个
                            tickInterval: 3,
                            // 坐标轴标题
                            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: false
                                },
                                // 当是柱状图时,柱状的宽度
                                pointWidth: 15
                            },

                            
/**
                             * 横向柱状图
                             */

                            bar:{
                                // 数据点的点击事件
                                events:{
                                    click: function(event){
                                        //alert('The bar was clicked, and you can add any other functions.');
                                    }
                                },
                                // 当值为0时,在图表中柱状体的长度设置
                                minPointLength: 2,
                                // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                                point:{
                                    events:{
                                        click: function(){
                                            //alert('This point was clicked. You can and any other functions.');
                                        }
                                    }
                                },
                                // 是否在图注中显示。
                                showInLegend: true,
                                // 是否堆叠,默认:null,数值:normal,百分比:percent
                                //stacking: 'normal',
                                // 调整图像顺序关系
                                zIndex: 1
                            },

                            
/**
                             * 纵向柱状图
                             */

                            column:{
                                // 数据点的点击事件
                                events:{
                                    click: function(event){
                                        //alert('The bar was clicked, and you can add any other functions.');
                                    }
                                },
                                // 当值为0时,在图表中柱状体的长度设置
                                minPointLength: 2,
                                // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                                point:{
                                    events:{
                                        click: function(){
                                            //alert('This point was clicked. You can and any other functions.');
                                        }
                                    }
                                },
                                // 是否在图注中显示。
                                showInLegend: true,
                                // 是否堆叠,默认:null,数值:normal,百分比:percent
                                //stacking: null,
                                // 调整图像顺序关系
                                zIndex: 2
                            },

                            
/**
                             * 线性图,与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
                             */

                            line:{
                                // 允许线性图上的数据点进行点击
                                allowPointSelect: true,
                                // 数据点的点击事件
                                events:{
                                    click: function(event){
                                        //alert('The bar was clicked, and you can add any other functions.');
                                    }
                                },
                                // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                                point:{
                                    events:{
                                        click: function(){
                                            //alert('This point on the line was clicked. You can and any other functions.');
                                        }
                                    }
                                },
                                // 是否在图注中显示。
                                showInLegend: true,
                                // 调整图像顺序关系
                                zIndex: 3
                            },

                            
/**
                             * 曲线图,与spline的区别在于点与点之间的连线是直线还是圆滑曲线。
                             */

                            spline:{
                                // 允许线性图上的数据点进行点击
                                allowPointSelect: true,
                                // 数据点的点击事件
                                events:{
                                    click: function(event){
                                        //alert('The bar was clicked, and you can add any other functions.');
                                    }
                                },
                                // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应,可以删除。
                                point:{
                                    events:{
                                        click: function(){
                                            //alert('This point on the line was clicked. You can and any other functions.');
                                        }
                                    }
                                },
                                // 是否在图注中显示。
                                showInLegend: true,
                                // 调整图像顺序关系
                                zIndex: 3
                            },

                            
/**
                             * 饼状图
                             */

                            pie:{
                                // 是否允许扇区点击
                                allowPointSelect: true,
                                // 点击后,滑开的距离
                                slicedOffset: 5,
                                // 饼图的中心坐标
                                center: [100, 80],
                                // 饼图的大小
                                size: 100,
                                // 数据标签
                                dataLabels: {
                                    // 是否允许标签
                                    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: false,
                                // 调整图像顺序关系
                                zIndex: 0
                            }
                        },

                        
/**
                         * 数据图表标签配置
                         * 
                         * @param {array} items 项目配置
                         */

                        labels: {
                            items: [{
                                    html: '水果总消耗量',
                                    style: {
                                        left: '65px',
                                        top: '8px',
                                        color: 'black'
                                    }
                                }]
                        },

                        
/**
                         * 数据源配置,本身是一个对象数组
                         * 
                         * @param {string} type 图表的类型
                         * @param {string} name 数据序列的名称
                         * @param {array} data 数据序列,是一个对象数组
                         */

                        series: [{
                                type: 'column',
                                name: 'Jane',
                                data: [3, 2, 1, 3, 4]
                            }, {
                                type: 'column',
                                name: 'John',
                                data: [2, 3, 5, 7, 6]
                            }, {
                                type: 'column',
                                name: 'Joe',
                                data: [4, 3, 3, 9, 0]
                            }, {
                                type: 'spline',
                                name: '平均',
                                data: [3, 2.67, 3, 6.33, 3.33]
                            }, {
                                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="./js/highcharts/highcharts.js"></script>
        <script src="./js/highcharts/modules/exporting.js"></script>

        <div id="container"></div>
    </body>
</html>
2. highstock实例代码,其中导出功能配置了本地化,用的是exporting中的导出接口。
<html>
    <head>
        <title>highstock报表示例</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="./js/jquery.min.js"></script>
        <!-- 源数据 -->
        <script type="text/javascript" src="./js/usdeur.js"></script>
        <script type="text/javascript">
            //图表
            $(function() {

                /**
                 * highstock数据图表
                 * 
                 * @param {object} chart 图表的相关参数配置
                 * @param {object} credits 图表版权信息参数配置
                 * @param {object} lang 图表语言参数配置
                 * @param {object} exporting 导出配置
                 * @param {object} title 标题配置
                 * @param {object} xAxis X轴配置
                 * @param {array} series 数据源配置
                 */

                var chart1 = new Highcharts.StockChart({

                    /**
                     * 图表配置
                     * 
                     * @param {string} renderTo 图表加载的位置
                     * @param {int} width 图表的宽度
                     * @param {int} hight 图表的高度
                     */

                    chart: {
                        renderTo: 'container',
                        // 图表宽度
                        width: 700,
                        // 图表高度
                        hight: 500
                    },

                    /**
                     * 版权信息配置,不用修改直接复制
                     * 
                     * @param {boolean} enabled 是否显示版权信息
                     * @param {string} href 版权信息所链接到的地址
                     * @param {string} text 版权信息所显示的文字内容
                     */

                    credits:{
                        enabled: false,
                        href: "http://www.msnui.tk/Admin",
                        text: '微源网络科技'
                    },

                    /**
                     * 语言配置,不用修改直接复制
                     * 
                     * @param {array} months 配置月份语言
                     * @param {array} shortMonths 配置短月份
                     * @param {array} weekdays 配置星期
                     * @param {string} exportButtonTitle 导出按钮的标题文字
                     * @param {string} printButtonTitle 打印按钮的标题文字
                     */

                    lang:{
                        months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                        shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],
                        weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
                        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: '报表',
                        // 配置导出接口
                        url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',
                        // 导出文件默认类型
                        type:'application/pdf'
                    },

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

                    title: {
                        text: '图表实例标题'
                    },

                    /**
                     * 域选择配置
                     * 
                     * @param {array} buttons 缩放选择按钮
                     * @param {int} selected 默认选择缩放按钮中的第几个
                     * @param {boolean} inputEnabled 是否允许input标签选框
                     */

                    rangeSelector: {
                        // 缩放选择按钮,是一个数组。
                        // 其中type可以是: 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。
                        // 其中count是指多少个单位type。
                        // 其中text是配置显示在按钮上的文字
                        buttons: [{
                                type: 'month',
                                count: 1,
                                text: '1月'
                            }, {
                                type: 'month',
                                count: 3,
                                text: '3月'
                            }, {
                                type: 'month',
                                count: 6,
                                text: '6月'
                            }, {
                                type: 'year',
                                count: 1,
                                text: '1年'
                            },{
                                type: 'year',
                                count: 3,
                                text: '3年'
                            }, {
                                type: 'all',
                                text: '所有'
                            }],
                        // 默认选择域:0(缩放按钮中的第一个)、1(缩放按钮中的第二个)……
                        selected: 1,
                        // 是否允许input标签选框
                        inputEnabled: false
                    },

                    /**
                     * 气泡示说明标签
                     * 
                     * @param {string} xDateFormat 日期时间格式化
                     */

                    tooltip:{
                        // 日期时间格式化
                        xDateFormat: '%Y-%m-%d %A'
                    },

                    /**
                     * X轴坐标配置
                     * 
                     * @param {object} dateTimeLabelFormats x轴日期时间格式化,不用修改直接使用
                     */

                    xAxis:{
                        // 如果X轴刻度是日期或时间,该配置是格式化日期及时间显示格式
                        dateTimeLabelFormats: {
                            second: '%Y-%m-%d<br/>%H:%M:%S',
                            minute: '%Y-%m-%d<br/>%H:%M',
                            hour: '%Y-%m-%d<br/>%H:%M',
                            day: '%Y<br/>%m-%d',
                            week: '%Y<br/>%m-%d',
                            month: '%Y-%m',
                            year: '%Y'
                        }
                    },

                    /**
                     * 数据源配置,本身是一个对象数组
                     * 
                     * @param {string} name 数据序列的名称
                     * @param {array} data 数据序列,是一个对象数组。data的结构:[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]
                     */

                    series: [{
                            name: '数据名称',
                            data: usdeur
                        }]
                });
            });
        </script>
    </head>
    <body>
        <script src="./js/highstock/highstock.js"></script>
        <script src="./js/highstock/modules/exporting.js"></script>

        <div id="container"></div>
    </body>
</html>
分享到:
评论

相关推荐

    highcharts和highstock的资料

    2. **图表类型**:Highcharts支持多种图表类型,包括折线图、柱状图、饼图、面积图、散点图、甘特图等。每种图表都有其特定的用途,如折线图用于显示趋势,饼图用于展示部分与整体的关系。 3. **数据加载**:数据...

    Highcharts&Highstock中文API PDF

    这两个库提供了丰富的图表类型,如折线图、柱状图、饼图、散点图等,支持多种定制选项,以满足各种视觉和功能需求。 Highcharts是一个强大的图表库,它允许开发者通过简单的API创建出高质量的数据可视化效果。其...

    highcharts、highstock下载功能改成自己的URL,不用连外网也能使用此功能。适用于VS2010、MVC3.0

    它们提供了丰富的图表类型,如折线图、柱状图、饼图等,并且支持多种自定义选项,使得数据呈现更加直观和专业。然而,原生的Highcharts和Highstock在进行图表下载和打印时,通常会依赖于外部服务器的服务,这可能...

    Highcharts&Highstock中文API PDF文件

    它支持多种图表类型,包括折线图、柱状图、饼图、散点图、面积图等。Highcharts以轻量级、易用性和强大的功能而闻名,可以轻松集成到任何网页项目中。 **Highstock简介** Highstock是在Highcharts基础上扩展的,专...

    highcharts&highstock中文API

    - 是Highcharts最核心的部分之一,提供了针对不同图表类型的详尽配置,如区域图、柱状图、饼图等。每种图表类型都有自己的子选项,如`dataLabels`(数据标签)、`events`(事件监听)、`marker`(标记)、`point`...

    highcharts简单的饼图demo

    Highcharts是一款强大的JavaScript图表库,用于在Web上创建各种数据可视化图表,如柱状图、折线图、饼图等。在这个"highcharts简单的饼图demo"中,我们将深入探讨如何利用Highcharts来构建一个基本的饼图,并根据...

    highChart包(含HighCharts.js,可引用设置折线图、柱状图、饼图等)

    HighCharts是一款强大的JavaScript图表库,它能够帮助开发者创建出交互式、美观的图表,包括折线图、柱状图、饼图等多种类型的图表。在给定的压缩包中,我们有"HighCharts.js"文件,这是HighCharts的核心库,包含了...

    highcharts快速生成百万数据点折线图.rar

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括折线图、柱状图、饼图等多种类型。在处理大数据量时,Highcharts提供了高效的优化策略,使得即使...

    jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

    在本实例中,我们将详细探讨如何使用jQuery插件HighCharts来绘制2D柱状图、折线图和饼图的组合图。这将帮助我们以视觉化的方式展示数据,比如在销售报告中显示各天的销售额以及它们的平均值,并通过饼图展示销售比例...

    html5饼图、柱状图、折线图,Html5+JS开发

    本资源包含了一系列使用HTML5和JavaScript技术实现的图表,包括饼图、柱状图和折线图,为数据可视化提供了直观且美观的解决方案。 饼图是一种常用于显示部分与整体之间关系的数据表示方式,通过扇形区域的大小来...

    highcharts highstock

    - **图表类型**:Highcharts支持包括折线图、面积图、柱状图、饼图、散点图、气泡图、条形图、面积范围图、热力图等多种图表类型,可以根据不同的数据和应用场景选择合适的图表。 - **交互性**:Highcharts的图表...

    柱状图、折线图、饼图、蜘蛛图完整demo

    这个压缩包包含的“柱状图、折线图、饼图、蜘蛛图完整demo”是Highcharts的具体应用示例,帮助开发者理解和学习如何使用该库。 首先,我们来看柱状图(Bar Chart)。柱状图是一种常用的数据可视化工具,用于比较...

    java利用jQuery生成饼图,折线图,柱状图

    本篇文章将深入探讨如何在Java项目中结合jQuery生成饼图、柱状图和折线图,帮助开发者提升数据展示的直观性。 首先,我们需要明白jQuery本身并不直接支持生成图表,但可以通过与第三方图表库结合来实现。例如,我们...

    多个JS+Json柱状图饼图折线图示例

    3. **Highcharts.rar**:Highcharts是一个著名的JavaScript图表库,提供多种图表类型,包括柱状图、饼图和折线图等。它具有丰富的API和高度自定义的选项,使得开发者可以轻松创建复杂且美观的图表。 4. **...

    用jQuery实现的柱状图,折线图,饼图

    在这个场景下,我们关注的是使用jQuery库来实现柱状图、折线图和饼图。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互,使得创建动态网页变得更加容易。 柱状图(Bar Chart)...

    JS画图,柱状图,饼图,折线图,例子代码

    本主题将深入探讨如何使用JS实现柱状图、饼图和折线图的绘制,以及如何实现数据与代码的分离,使得代码更加可维护和灵活。 首先,让我们了解一下柱状图。柱状图是一种用于比较不同类别数据的有效方式。在JS中,我们...

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    Highcharts 折线统计图

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的统计图表,包括折线图、柱状图、饼图、散点图等。在这个“Highcharts 折线统计图”的主题中,我们将深入探讨...

    折线图demo highCharts

    HighCharts是一个基于JavaScript的开源图表库,它提供了丰富的图表类型,包括折线图、柱状图、饼图、散点图等。HighCharts支持响应式设计,可以在桌面端和移动端上良好地运行,同时提供了大量的自定义选项,以满足...

Global site tag (gtag.js) - Google Analytics