zoukankan      html  css  js  c++  java
  • jquery 数据图表

    引用:http://www.oschina.net/code/snippet_197014_12286

    Jquery实现数据图表数据统计插件统计功能包括了时间序列,可缩放的、时间数据不规则间隔、面积百分比、堆叠和分组列、散射与回归线、花键与倒轴、地区失踪点、柱旋转标签。。。
     
    效果如下:
    Jquery插件,Jquery资源,Jquery特效,div+css
    Jquery插件,Jquery资源,Jquery特效,div+css
    Jquery插件,Jquery资源,Jquery特效,div+css
    Jquery插件,Jquery资源,Jquery特效,div+css
    Jquery插件,Jquery资源,Jquery特效,div+css
    Jquery插件,Jquery资源,Jquery特效,div+css 

    在线演示和下载请查看: 
    http://www.jq-school.com/Detail.aspx?id=28 
     
    标签: jQuery
     

    代码片段(1)

    [代码] [JavaScript]代码

    01     <script type="text/javascript">
    02 $(function () {
    03     var chart;
    04     $(document).ready(function() {
    05         chart = new Highcharts.Chart({
    06             chart: {
    07                 renderTo: 'container',
    08                 type: 'area'
    09             },
    10             title: {
    11                 text: 'US and USSR nuclear stockpiles'
    12             },
    13             subtitle: {
    14                 text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
    15                     'thebulletin.metapress.com</a>'
    16             },
    17             xAxis: {
    18                 labels: {
    19                     formatter: function() {
    20                         return this.value; // clean, unformatted number for year
    21                     }
    22                 }
    23             },
    24             yAxis: {
    25                 title: {
    26                     text: 'Nuclear weapon states'
    27                 },
    28                 labels: {
    29                     formatter: function() {
    30                         return this.value / 1000 +'k';
    31                     }
    32                 }
    33             },
    34             tooltip: {
    35                 formatter: function() {
    36                     return this.series.name +' produced <b>'+
    37                         Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in 'this.x;
    38                 }
    39             },
    40             plotOptions: {
    41                 area: {
    42                     pointStart: 1940,
    43                     marker: {
    44                         enabled: false,
    45                         symbol: 'circle',
    46                         radius: 2,
    47                         states: {
    48                             hover: {
    49                                 enabled: true
    50                             }
    51                         }
    52                     }
    53                 }
    54             },
    55             series: [{
    56                 name: 'USA',
    57                 data: [nullnullnullnullnull, 6 , 11, 32, 110, 235, 369, 640,
    58                     1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
    59                     27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
    60                     26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
    61                     24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
    62                     22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
    63                     10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
    64             }, {
    65                 name: 'USSR/Russia',
    66                 data: [nullnullnullnullnullnullnull null ,null ,null,
    67                 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
    68                 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
    69                 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
    70                 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
    71                 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
    72                 21000, 20000, 19000, 18000, 18000, 17000, 16000]
    73             }]
    74         });
    75     });
    76      
    77 });
    78         </script>
  • 相关阅读:
    架构-LAMP特级学习(网站加速解决方案)
    架构-LAMP特级学习(网站大存储量解决方案)
    架构-LAMP特级学习(网站大访问量解决方案)
    Shell-学习笔记
    算法-随手写的冒泡排序
    算法-随手写的二分查找
    cocos2dx 3.x ccPositionTextureColor_vert与ccPositionTextureColor_noMVP_vert
    cocos2dx当节点存在缩放时要注意的问题
    cocos2dx 3.x draw debug
    cocos2dx 3.x ccDrawLine一个坑
  • 原文地址:https://www.cnblogs.com/sode/p/2696854.html
Copyright © 2011-2022 走看看