• 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>  
  • 相关阅读:
    时间编程
    移动文件流的读写指针---fseek
    Xadmin添加用户小组件出错render() got an unexpected keyword argument 'renderer
    xadmin安装
    Django：Python3.6.2+Django2.0配置MySQL 转载
    gitignore文件不生效
    django图片上传修改图片名称
    python3 提示sqlite模块不存在
    Django-admin列表展示上传图片
    django使用admin站点上传图片
  • 原文地址：https://www.cnblogs.com/TBW-Superhero/p/5990230.html
Copyright © 2020-2023  润新知