highcharts与highstock实例

  1. <head>  
  2.         <title>highcharts报表示例</title>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  4.         <script type="text/javascript" src="./js/jquery.min.js"></script>  
  5.         <script type="text/javascript">  
  6.             $(function () {  
  7.                 var chart;  
  8.                 $(document).ready(function() {  
  9.                     /**  
  10.                      * highcharts数据图表  
  11.                      *   
  12.                      * @param {object} chart 图表的相关参数配置  
  13.                      * @param {object} credits 图表版权信息参数配置  
  14.                      * @param {object} lang 图表语言参数配置  
  15.                      * @param {object} exporting 导出配置  
  16.                      * @param {object} title 标题配置  
  17.                      * @param {object} xAxis X轴配置  
  18.                      * @param {object} yAxis Y轴配置  
  19.                      * @param {object} plotOptions 各类型图表绘制配置  
  20.                      * @param {object} labels 数据图表标签配置  
  21.                      * @param {array} series 数据源配置  
  22.                      */  
  23.                     chart = new Highcharts.Chart({  
  24.                         /**  
  25.                          * 图表配置  
  26.                          *   
  27.                          * @param {string} renderTo 图表加载的位置  
  28.                          * @param {int} width 图表的宽度  
  29.                          * @param {int} hight 图表的高度  
  30.                          * @param {string} type 图表的默认类型  
  31.                          * @param {string} zoomType 图表的缩放选项，有：x, y, xy  
  32.                          */  
  33.                         chart: {  
  34.                             // 图表加载的位置  
  35.                             renderTo: 'container',  
  36.                             // 图表宽度  
  37.                              600,  
  38.                             // 图表高度  
  39.                             hight: 500,  
  40.                             // 默认图表类型  
  41.                             type: 'line',  
  42.                             // 缩放配置：x，y，xy  
  43.                             zoomType: ''  
  44.                         },  
  45.   
  46.                         /**  
  47.                          * 版权信息配置，不用修改直接复制  
  48.                          *   
  49.                          * @param {boolean} enabled 是否显示版权信息  
  50.                          * @param {string} href 版权信息所链接到的地址  
  51.                          * @param {string} text 版权信息所显示的文字内容  
  52.                          */  
  53.                         credits:{  
  54.                             enabled: false,  
  55.                             href: "http://www.msnui.tk/Admin",  
  56.                             text: '微源网络科技'  
  57.                         },  
  58.   
  59.                         /**  
  60.                          * 语言配置，不用修改直接复制  
  61.                          *   
  62.                          * @param {string} exportButtonTitle 导出按钮的标题文字  
  63.                          * @param {string} printButtonTitle 打印按钮的标题文字  
  64.                          */  
  65.                         lang:{  
  66.                             exportButtonTitle:'导出PDF',  
  67.                             printButtonTitle:'打印报表'  
  68.                         },  
  69.   
  70.                         /**  
  71.                          * 导出配置，不用修改直接复制  
  72.                          *   
  73.                          * @param {boolean} enabled 是否允许导出  
  74.                          * @param {object} buttons 关于与导出和打印按钮相关的配置对象  
  75.                          * @param {string} filename 导出文件的文件名  
  76.                          * @param {string} type 默认导出文件的格式  
  77.                          */  
  78.                         exporting:{  
  79.                             // 是否允许导出  
  80.                             enabled:true,  
  81.                             // 按钮配置  
  82.                             buttons:{  
  83.                                 // 导出按钮配置  
  84.                                 exportButton:{  
  85.                                     menuItems: null,  
  86.                                     onclick: function() {  
  87.                                         this.exportChart();  
  88.                                     }  
  89.                                 },  
  90.                                 // 打印按钮配置  
  91.                                 printButton:{  
  92.                                     enabled:false  
  93.                                 }  
  94.                             },  
  95.                             // 文件名  
  96.                             filename: '报表',  
  97.                             // 导出文件默认类型  
  98.                             type:'application/pdf'  
  99.                         },  
  100.   
  101.                         /**  
  102.                          * 图表的标题  
  103.                          *   
  104.                          * @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行  
  105.                          */  
  106.                         title: {  
  107.                             text: '联合图表实例'  
  108.                         },  
  109.   
  110.                         /**  
  111.                          * X轴配置  
  112.                          *   
  113.                          * @param {array} categories X轴坐标分类值  
  114.                          * @param {object} labels 坐标标签配置对象  
  115.                          * @param {int} tickInterval 坐标轴的步进值  
  116.                          * @param {object} title 坐标轴标题  
  117.                          */  
  118.                         xAxis: {  
  119.                             // X轴分类  
  120.                             categories: ['苹果', '桔子', '梨子', '香蕉', '李子'],  
  121.                             // 坐标轴的标签  
  122.                             labels:{  
  123.                                 // 标签位置  
  124.                                 align: 'center',  
  125.                                 // 标签格式化  
  126.                                 formatter: function(){  
  127.                                     return this.value;  
  128.                                 },  
  129.                                 // 标签旋转度数  
  130.                                 rotation: 20,  
  131.                                 // 标签交错显示的行数  
  132.                                 staggerLines: 1  
  133.                             },  
  134.                             // X轴的步进值，决定隔多少个显示一个  
  135.                             tickInterval: 1,  
  136.                             // 坐标轴标题  
  137.                             title: {  
  138.                                 text: '水果分类'  
  139.                             }  
  140.                         },  
  141.   
  142.                         /**  
  143.                          * y轴配置  
  144.                          *   
  145.                          * @param {object} labels 坐标标签配置对象  
  146.                          * @param {int} tickInterval 坐标轴的步进值  
  147.                          * @param {object} title 坐标轴标题  
  148.                          */  
  149.                         yAxis: {  
  150.                             // 坐标轴的标签  
  151.                             labels:{  
  152.                                 // 标签位置  
  153.                                 align: 'right',  
  154.                                 // 标签格式化  
  155.                                 formatter: function(){  
  156.                                     return this.value + '个';  
  157.                                 }  
  158.                             },  
  159.                             // y轴的步进值，决定隔多少个显示一个  
  160.                             tickInterval: 3,  
  161.                             // 坐标轴标题  
  162.                             title: {  
  163.                                 text: '水果个数'  
  164.                             }  
  165.                         },  
  166.   
  167.                         /**  
  168.                          * 绘图的各选项、参数配置  
  169.                          * @param {object} series 数列，可以配置各种不同类型图表的默认参数  
  170.                          * @param {object} bar 横向柱状图配置参数  
  171.                          * @param {object} column 纵向柱状图配置参数  
  172.                          * @param {object} line 线性图  
  173.                          * @param {object} spline 圆滑曲线图配置参数  
  174.                          * @param {object} pie 饼状图  
  175.                          */  
  176.                         plotOptions:{  
  177.                             /**  
  178.                              * 数列，对于所有的图表都可以适用的配置参数，属于共用性质。  
  179.                              */  
  180.                             series: {  
  181.                                 // 鼠标样式  
  182.                                 cursor: 'pointer',  
  183.                                 events:{  
  184.                                     // 数据标注不可点击  
  185.                                     legendItemClick: false  
  186.                                 },  
  187.                                 // 当是柱状图时，柱状的宽度  
  188.                                 pointWidth: 15  
  189.                             },  
  190.   
  191.                             /**  
  192.                              * 横向柱状图  
  193.                              */  
  194.                             bar:{  
  195.                                 // 数据点的点击事件  
  196.                                 events:{  
  197.                                     click: function(event){  
  198.                                         //alert('The bar was clicked, and you can add any other functions.');  
  199.                                     }  
  200.                                 },  
  201.                                 // 当值为0时，在图表中柱状体的长度设置  
  202.                                 minPointLength: 2,  
  203.                                 // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。  
  204.                                 point:{  
  205.                                     events:{  
  206.                                         click: function(){  
  207.                                             //alert('This point was clicked. You can and any other functions.');  
  208.                                         }  
  209.                                     }  
  210.                                 },  
  211.                                 // 是否在图注中显示。  
  212.                                 showInLegend: true,  
  213.                                 // 是否堆叠，默认：null，数值：normal，百分比：percent  
  214.                                 //stacking: 'normal',  
  215.                                 // 调整图像顺序关系  
  216.                                 zIndex: 1  
  217.                             },  
  218.   
  219.                             /**  
  220.                              * 纵向柱状图  
  221.                              */  
  222.                             column:{  
  223.                                 // 数据点的点击事件  
  224.                                 events:{  
  225.                                     click: function(event){  
  226.                                         //alert('The bar was clicked, and you can add any other functions.');  
  227.                                     }  
  228.                                 },  
  229.                                 // 当值为0时，在图表中柱状体的长度设置  
  230.                                 minPointLength: 2,  
  231.                                 // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。  
  232.                                 point:{  
  233.                                     events:{  
  234.                                         click: function(){  
  235.                                             //alert('This point was clicked. You can and any other functions.');  
  236.                                         }  
  237.                                     }  
  238.                                 },  
  239.                                 // 是否在图注中显示。  
  240.                                 showInLegend: true,  
  241.                                 // 是否堆叠，默认：null，数值：normal，百分比：percent  
  242.                                 //stacking: null,  
  243.                                 // 调整图像顺序关系  
  244.                                 zIndex: 2  
  245.                             },  
  246.   
  247.                             /**  
  248.                              * 线性图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。  
  249.                              */  
  250.                             line:{  
  251.                                 // 允许线性图上的数据点进行点击  
  252.                                 allowPointSelect: true,  
  253.                                 // 数据点的点击事件  
  254.                                 events:{  
  255.                                     click: function(event){  
  256.                                         //alert('The bar was clicked, and you can add any other functions.');  
  257.                                     }  
  258.                                 },  
  259.                                 // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。  
  260.                                 point:{  
  261.                                     events:{  
  262.                                         click: function(){  
  263.                                             //alert('This point on the line was clicked. You can and any other functions.');  
  264.                                         }  
  265.                                     }  
  266.                                 },  
  267.                                 // 是否在图注中显示。  
  268.                                 showInLegend: true,  
  269.                                 // 调整图像顺序关系  
  270.                                 zIndex: 3  
  271.                             },  
  272.   
  273.                             /**  
  274.                              * 曲线图，与spline的区别在于点与点之间的连线是直线还是圆滑曲线。  
  275.                              */  
  276.                             spline:{  
  277.                                 // 允许线性图上的数据点进行点击  
  278.                                 allowPointSelect: true,  
  279.                                 // 数据点的点击事件  
  280.                                 events:{  
  281.                                     click: function(event){  
  282.                                         //alert('The bar was clicked, and you can add any other functions.');  
  283.                                     }  
  284.                                 },  
  285.                                 // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。  
  286.                                 point:{  
  287.                                     events:{  
  288.                                         click: function(){  
  289.                                             //alert('This point on the line was clicked. You can and any other functions.');  
  290.                                         }  
  291.                                     }  
  292.                                 },  
  293.                                 // 是否在图注中显示。  
  294.                                 showInLegend: true,  
  295.                                 // 调整图像顺序关系  
  296.                                 zIndex: 3  
  297.                             },  
  298.   
  299.                             /**  
  300.                              * 饼状图  
  301.                              */  
  302.                             pie:{  
  303.                                 // 是否允许扇区点击  
  304.                                 allowPointSelect: true,  
  305.                                 // 点击后，滑开的距离  
  306.                                 slicedOffset: 5,  
  307.                                 // 饼图的中心坐标  
  308.                                 center: [100, 80],  
  309.                                 // 饼图的大小  
  310.                                 size: 100,  
  311.                                 // 数据标签  
  312.                                 dataLabels: {  
  313.                                     // 是否允许标签  
  314.                                     enabled: true,  
  315.                                     // 标签与图像元素之间的间距  
  316.                                     distance: 10  
  317.                                 },  
  318.                                 // 数据点的点击事件  
  319.                                 events:{  
  320.                                     click: function(event){  
  321.                                         //alert('The bar was clicked, and you can add any other functions.');  
  322.                                     }  
  323.                                 },  
  324.                                 // 是否忽略隐藏的项  
  325.                                 ignoreHiddenPoint: true,  
  326.                                 // 当具体的数据点被点击时的事件响应函数。如果不需要事件响应，可以删除。  
  327.                                 point:{  
  328.                                     events:{  
  329.                                         click: function(){  
  330.                                             //alert('This point on the line was clicked. You can and any other functions.');  
  331.                                         }  
  332.                                     }  
  333.                                 },  
  334.                                 // 是否在图注中显示。  
  335.                                 showInLegend: false,  
  336.                                 // 调整图像顺序关系  
  337.                                 zIndex: 0  
  338.                             }  
  339.                         },  
  340.   
  341.                         /**  
  342.                          * 数据图表标签配置  
  343.                          *   
  344.                          * @param {array} items 项目配置  
  345.                          */  
  346.                         labels: {  
  347.                             items: [{  
  348.                                     html: '水果总消耗量',  
  349.                                     style: {  
  350.                                         left: '65px',  
  351.                                         top: '8px',  
  352.                                         color: 'black'  
  353.                                     }  
  354.                                 }]  
  355.                         },  
  356.   
  357.                         /**  
  358.                          * 数据源配置，本身是一个对象数组  
  359.                          *   
  360.                          * @param {string} type 图表的类型  
  361.                          * @param {string} name 数据序列的名称  
  362.                          * @param {array} data 数据序列，是一个对象数组  
  363.                          */  
  364.                         series: [{  
  365.                                 type: 'column',  
  366.                                 name: 'Jane',  
  367.                                 data: [3, 2, 1, 3, 4]  
  368.                             }, {  
  369.                                 type: 'column',  
  370.                                 name: 'John',  
  371.                                 data: [2, 3, 5, 7, 6]  
  372.                             }, {  
  373.                                 type: 'column',  
  374.                                 name: 'Joe',  
  375.                                 data: [4, 3, 3, 9, 0]  
  376.                             }, {  
  377.                                 type: 'spline',  
  378.                                 name: '平均',  
  379.                                 data: [3, 2.67, 3, 6.33, 3.33]  
  380.                             }, {  
  381.                                 type: 'pie',  
  382.                                 name: '水果总消耗量',  
  383.                                 data: [{  
  384.                                         name: 'Jane',  
  385.                                         y: 13,  
  386.                                         color: '#4572A7' // Jane's color  
  387.                                     }, {  
  388.                                         name: 'John',  
  389.                                         y: 23,  
  390.                                         color: '#AA4643' // John's color  
  391.                                     }, {  
  392.                                         name: 'Joe',  
  393.                                         y: 19,  
  394.                                         color: '#89A54E' // Joe's color  
  395.                                     }]  
  396.                             }]  
  397.                     });  
  398.                 });  
  399.   
  400.             });  
  401.         </script>  
  402.     </head>  
  403.     <body>  
  404.         <script src="./js/highcharts/highcharts.js"></script>  
  405.         <script src="./js/highcharts/modules/exporting.js"></script>  
  406.   
  407.         <div id="container"></div>  
  408.     </body>  
  409. </html>  


2. highstock实例代码，其中导出功能配置了本地化，用的是exporting中的导出接口。

[html] view plain copy
 
    1. <html>  
    2.     <head>  
    3.         <title>highstock报表示例</title>  
    4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
    5.         <script type="text/javascript" src="./js/jquery.min.js"></script>  
    6.         <!-- 源数据 -->  
    7.         <script type="text/javascript" src="./js/usdeur.js"></script>  
    8.         <script type="text/javascript">  
    9.             //图表  
    10.             $(function() {  
    11.   
    12.                 /**  
    13.                  * highstock数据图表  
    14.                  *   
    15.                  * @param {object} chart 图表的相关参数配置  
    16.                  * @param {object} credits 图表版权信息参数配置  
    17.                  * @param {object} lang 图表语言参数配置  
    18.                  * @param {object} exporting 导出配置  
    19.                  * @param {object} title 标题配置  
    20.                  * @param {object} xAxis X轴配置  
    21.                  * @param {array} series 数据源配置  
    22.                  */  
    23.                 var chart1 = new Highcharts.StockChart({  
    24.   
    25.                     /**  
    26.                      * 图表配置  
    27.                      *   
    28.                      * @param {string} renderTo 图表加载的位置  
    29.                      * @param {int} width 图表的宽度  
    30.                      * @param {int} hight 图表的高度  
    31.                      */  
    32.                     chart: {  
    33.                         renderTo: 'container',  
    34.                         // 图表宽度  
    35.                          700,  
    36.                         // 图表高度  
    37.                         hight: 500  
    38.                     },  
    39.   
    40.                     /**  
    41.                      * 版权信息配置，不用修改直接复制  
    42.                      *   
    43.                      * @param {boolean} enabled 是否显示版权信息  
    44.                      * @param {string} href 版权信息所链接到的地址  
    45.                      * @param {string} text 版权信息所显示的文字内容  
    46.                      */  
    47.                     credits:{  
    48.                         enabled: false,  
    49.                         href: "http://www.msnui.tk/Admin",  
    50.                         text: '微源网络科技'  
    51.                     },  
    52.   
    53.                     /**  
    54.                      * 语言配置，不用修改直接复制  
    55.                      *   
    56.                      * @param {array} months 配置月份语言  
    57.                      * @param {array} shortMonths 配置短月份  
    58.                      * @param {array} weekdays 配置星期  
    59.                      * @param {string} exportButtonTitle 导出按钮的标题文字  
    60.                      * @param {string} printButtonTitle 打印按钮的标题文字  
    61.                      */  
    62.                     lang:{  
    63.                         months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],  
    64.                         shortMonths: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一', '十二'],  
    65.                         weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],  
    66.                         exportButtonTitle:'导出PDF',  
    67.                         printButtonTitle:'打印报表'  
    68.                     },  
    69.   
    70.                     /**  
    71.                      * 导出配置，不用修改直接复制  
    72.                      *   
    73.                      * @param {boolean} enabled 是否允许导出  
    74.                      * @param {object} buttons 关于与导出和打印按钮相关的配置对象  
    75.                      * @param {string} filename 导出文件的文件名  
    76.                      * @param {string} type 默认导出文件的格式  
    77.                      */  
    78.                     exporting:{  
    79.                         // 是否允许导出  
    80.                         enabled:true,  
    81.                         // 按钮配置  
    82.                         buttons:{  
    83.                             // 导出按钮配置  
    84.                             exportButton:{  
    85.                                 menuItems: null,  
    86.                                 onclick: function() {  
    87.                                     this.exportChart();  
    88.                                 }  
    89.                             },  
    90.                             // 打印按钮配置  
    91.                             printButton:{  
    92.                                 enabled:false  
    93.                             }  
    94.                         },  
    95.                         // 文件名  
    96.                         filename: '报表',  
    97.                         // 配置导出接口  
    98.                         url: 'http://' + location.hostname + '/test/Highcharts-2.3.2/example/exporting/index.php',  
    99.                         // 导出文件默认类型  
    100.                         type:'application/pdf'  
    101.                     },  
    102.   
    103.                     /**  
    104.                      * 图表的标题  
    105.                      *   
    106.                      * @param {string} text 图表的标题，如果不需要显示标题，直接设置为空字符串就行  
    107.                      */  
    108.                     title: {  
    109.                         text: '图表实例标题'  
    110.                     },  
    111.   
    112.                     /**  
    113.                      * 域选择配置  
    114.                      *   
    115.                      * @param {array} buttons 缩放选择按钮  
    116.                      * @param {int} selected 默认选择缩放按钮中的第几个  
    117.                      * @param {boolean} inputEnabled 是否允许input标签选框  
    118.                      */  
    119.                     rangeSelector: {  
    120.                         // 缩放选择按钮，是一个数组。  
    121.                         // 其中type可以是： 'millisecond', 'second', 'minute', 'day', 'week', 'month', 'ytd' (year to date), 'year' 和 'all'。  
    122.                         // 其中count是指多少个单位type。  
    123.                         // 其中text是配置显示在按钮上的文字  
    124.                         buttons: [{  
    125.                                 type: 'month',  
    126.                                 count: 1,  
    127.                                 text: '1月'  
    128.                             }, {  
    129.                                 type: 'month',  
    130.                                 count: 3,  
    131.                                 text: '3月'  
    132.                             }, {  
    133.                                 type: 'month',  
    134.                                 count: 6,  
    135.                                 text: '6月'  
    136.                             }, {  
    137.                                 type: 'year',  
    138.                                 count: 1,  
    139.                                 text: '1年'  
    140.                             },{  
    141.                                 type: 'year',  
    142.                                 count: 3,  
    143.                                 text: '3年'  
    144.                             }, {  
    145.                                 type: 'all',  
    146.                                 text: '所有'  
    147.                             }],  
    148.                         // 默认选择域：0（缩放按钮中的第一个）、1（缩放按钮中的第二个）……  
    149.                         selected: 1,  
    150.                         // 是否允许input标签选框  
    151.                         inputEnabled: false  
    152.                     },  
    153.   
    154.                     /**  
    155.                      * 气泡示说明标签  
    156.                      *   
    157.                      * @param {string} xDateFormat 日期时间格式化  
    158.                      */  
    159.                     tooltip:{  
    160.                         // 日期时间格式化  
    161.                         xDateFormat: '%Y-%m-%d %A'  
    162.                     },  
    163.   
    164.                     /**  
    165.                      * X轴坐标配置  
    166.                      *   
    167.                      * @param {object} dateTimeLabelFormats x轴日期时间格式化，不用修改直接使用  
    168.                      */  
    169.                     xAxis:{  
    170.                         // 如果X轴刻度是日期或时间，该配置是格式化日期及时间显示格式  
    171.                         dateTimeLabelFormats: {  
    172.                             second: '%Y-%m-%d<br/>%H:%M:%S',  
    173.                             minute: '%Y-%m-%d<br/>%H:%M',  
    174.                             hour: '%Y-%m-%d<br/>%H:%M',  
    175.                             day: '%Y<br/>%m-%d',  
    176.                             week: '%Y<br/>%m-%d',  
    177.                             month: '%Y-%m',  
    178.                             year: '%Y'  
    179.                         }  
    180.                     },  
    181.   
    182.                     /**  
    183.                      * 数据源配置，本身是一个对象数组  
    184.                      *   
    185.                      * @param {string} name 数据序列的名称  
    186.                      * @param {array} data 数据序列，是一个对象数组。data的结构：[[时间戳, 值], [时间戳, 值], [时间戳, 值], ……]  
    187.                      */  
    188.                     series: [{  
    189.                             name: '数据名称',  
    190.                             data: usdeur  
    191.                         }]  
    192.                 });  
    193.             });  
    194.         </script>  
    195.     </head>  
    196.     <body>  
    197.         <script src="./js/highstock/highstock.js"></script>  
    198.         <script src="./js/highstock/modules/exporting.js"></script>  
    199.   
    200.         <div id="container"></div>  
    201.     </body>  
    202. </html>  
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/TBW-Superhero/p/5990230.html