Highstock配置

来源：互联网发布：动物探测仪软件编辑：程序博客网时间：2024/06/07 03:39
<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>