Highcharts 中文社区

查看: 2524|回复: 2

[代码共享] 重新分享,忘记加效果图了

[复制链接]
  • TA的每日心情
    开心
    2017-7-3 16:56
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    7

    主题

    79

    帖子

    300

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    300
    发表于 2017-6-19 18:49:04 | 显示全部楼层 |阅读模式
    本帖最后由 简数科技 于 2017-6-19 20:19 编辑
    1. <div id="container" style="min-width:400px;height:400px"></div>
    2. <script>
    3. function onChartLoad() {
    4.   var centerX = 140,
    5.     centerY = 110,
    6.     path = [],
    7.     angle,
    8.     radius,
    9.     badgeColor = Highcharts.Color(Highcharts.getOptions().colors[0]).brighten(-0.2).get(),
    10.     spike;
    11.   if (this.chartWidth < 530) {
    12.     return;
    13.   }
    14.   // Draw the spiked disc
    15.   for (angle = 0; angle < 2 * Math.PI; angle += Math.PI / 24) {
    16.     radius = spike ? 80 : 70;
    17.     path.push(
    18.       'L',
    19.       centerX + radius * Math.cos(angle),
    20.       centerY + radius * Math.sin(angle)
    21.     );
    22.     spike = !spike;
    23.   }
    24.   path[0] = 'M';
    25.   path.push('z');
    26.   this.renderer.path(path)
    27.     .attr({
    28.       fill: badgeColor,
    29.       zIndex: 6
    30.     })
    31.     .add();
    32.   // Employee image overlay
    33.   var empImage = this.renderer.path(path)
    34.     .attr({
    35.       zIndex: 7,
    36.       opacity: 0,
    37.       stroke: badgeColor,
    38.       'stroke-width': 1
    39.     })
    40.     .add();
    41.   // Big 5
    42.   var big5 = this.renderer.text('20')
    43.     .attr({
    44.       zIndex: 6
    45.     })
    46.     .css({
    47.       color: 'white',
    48.       fontSize: '100px',
    49.       fontStyle: 'italic',
    50.       fontFamily: "'Brush Script MT', sans-serif"
    51.     })
    52.     .add();
    53.   big5.attr({
    54.     x: centerX - big5.getBBox().width / 2,
    55.     y: centerY + 14
    56.   });
    57.   // Draw the label
    58.   var label = this.renderer.text('动漫')
    59.     .attr({
    60.       zIndex: 6
    61.     })
    62.     .css({
    63.       color: '#FFFFFF'
    64.     })
    65.     .add()
    66.   var left = centerX - label.getBBox().width / 2,
    67.     right = centerX + label.getBBox().width / 2;
    68.   label.attr({
    69.     x: left,
    70.     y: centerY + 44
    71.   });
    72.   // The band
    73.   left = centerX - 90;
    74.   right = centerX + 90;
    75.   this.renderer.path([
    76.       'M', left, centerY + 30,
    77.       'L', right, centerY + 30,
    78.       right, centerY + 50,
    79.       left, centerY + 50,
    80.       'z',
    81.       'M', left, centerY + 40,
    82.       'L', left - 20, centerY + 40,
    83.       left - 10, centerY + 50,
    84.       left - 20, centerY + 60,
    85.       left + 10, centerY + 60,
    86.       left, centerY + 50,
    87.       left + 10, centerY + 60,
    88.       left + 10, centerY + 50,
    89.       left, centerY + 50,
    90.       'z',
    91.       'M', right, centerY + 40,
    92.       'L', right + 20, centerY + 40,
    93.       right + 10, centerY + 50,
    94.       right + 20, centerY + 60,
    95.       right - 10, centerY + 60,
    96.       right, centerY + 50,
    97.       right - 10, centerY + 60,
    98.       right - 10, centerY + 50,
    99.       right, centerY + 50,
    100.       'z',
    101.     ])
    102.     .attr({
    103.       fill: badgeColor,
    104.       stroke: '#FFFFFF',
    105.       'stroke-width': 1,
    106.       zIndex: 5
    107.     })
    108.     .add();
    109.   // 2009-2014
    110.   var years = this.renderer.text('1990-2010')
    111.     .attr({
    112.       zIndex: 6
    113.     })
    114.     .css({
    115.       color: '#FFFFFF',
    116.       fontStyle: 'italic',
    117.       fontSize: '10px'
    118.     })
    119.     .add();
    120.   years.attr({
    121.     x: centerX - years.getBBox().width / 2,
    122.     y: centerY + 62
    123.   });
    124.   // Prepare mouseover
    125.   var renderer = this.renderer;
    126.   if (renderer.defs) { // is SVG
    127.     $.each(this.get('employees').points, function(i, point) {
    128.       if (point.image) {
    129.         var pattern = renderer.createElement('pattern').attr({
    130.           id: 'pattern-' + point.image,
    131.           patternUnits: 'userSpaceOnUse',
    132.           width: 400,
    133.           height: 400
    134.         }).add(renderer.defs);
    135.         renderer.image(

    136.           'img/' + point.image + '.jpg',
    137.           centerX - 80,
    138.           centerY - 80,
    139.           160,
    140.           213
    141.         ).add(pattern);
    142.         Highcharts.addEvent(point, 'mouseOver', function() {
    143.           empImage.attr({
    144.               fill: 'url(#pattern-' + point.image + ')'
    145.             })
    146.             .animate({
    147.               opacity: 1
    148.             }, {
    149.               duration: 500
    150.             })
    151.         });
    152.         Highcharts.addEvent(point, 'mouseOut', function() {
    153.           empImage.animate({
    154.             opacity: 0
    155.           }, {
    156.             duration: 500
    157.           });
    158.         });
    159.       }
    160.     });
    161.   }
    162. }
    163. $(function() {
    164.       var options = {
    165.         chart: {
    166.           events: {
    167.             load: onChartLoad
    168.           }
    169.         },
    170.         xAxis: {
    171.           type: 'datetime',
    172.           minTickInterval: 365 * 24 * 36e5,
    173.           labels: {
    174.             align: 'left'
    175.           },
    176.           plotBands: [{
    177.             from: Date.UTC(1990),
    178.             to: Date.UTC(1995),
    179.             color: '#EFFFFF',
    180.             label: {
    181.               style: {
    182.                 color: '#999999'
    183.               },
    184.               y: 180
    185.             }
    186.           }, {
    187.             from: Date.UTC(1995),
    188.             to: Date.UTC(2005),
    189.             color: '#FFFFEF',
    190.             label: {
    191.               style: {
    192.                 color: '#999999'
    193.               },
    194.               y: 30
    195.             }
    196.           }, {
    197.             from: Date.UTC(2005),
    198.             to: Date.UTC(2010),
    199.             color: '#FFEFFF',
    200.             label: {
    201.               style: {
    202.                 color: '#999999'
    203.               },
    204.               y: 30
    205.             }
    206.           }]
    207.         },
    208.         title: {
    209.           text: '1990-2010年 最受欢迎的动漫制作时间'
    210.         },
    211.         tooltip: {
    212.           style: {
    213.             width: '250px'
    214.           }
    215.         },
    216.         yAxis: [{
    217.           max: 100,
    218.           labels: {
    219.             enabled: false
    220.           },
    221.           title: {
    222.             text: ''
    223.           },
    224.           gridLineColor: 'rgba(0, 0, 0, 0.07)'
    225.         }, {
    226.           allowDecimals: false,
    227.           max: 43,
    228.           labels: {
    229.             style: {
    230.               color: Highcharts.getOptions().colors[2]
    231.             }
    232.           },
    233.           title: {
    234.             text: '产量',
    235.             style: {
    236.               color: Highcharts.getOptions().colors[2]
    237.             }
    238.           },
    239.           opposite: true,
    240.           gridLineWidth: 0
    241.         }],
    242.         plotOptions: {
    243.           series: {
    244.             marker: {
    245.               enabled: false,
    246.               symbol: 'circle',
    247.               radius: 2
    248.             },
    249.             fillOpacity: 0.5
    250.           },
    251.           flags: {
    252.             tooltip: {
    253.               xDateFormat: '%B %e, %Y'
    254.             }
    255.           }
    256.         },
    257.         series: [{
    258.           yAxis: 1,
    259.           name: '动漫集锦',
    260.           id: 'employees',
    261.           type: 'area',
    262.           step: 'left',
    263.           tooltip: {
    264.             headerFormat: '<span style="font-size: 11px;color:#666">{point.x:%Y}</span><br>',
    265.             pointFormat: '{point.name}<br><b>{point.y}</b>',
    266.             valueSuffix: ' 部'
    267.           },
    268.           data: []
    269.         }]
    270.       };
    271.       $.ajax({
    272.         url: 'pdo.php',
    273.         type: 'POST',
    274.         success: function(data) {
    275.           var jso = eval(data);
    276.           $.each(jso, function(i, o) {
    277.               options.series[0].data.push({
    278.                 x: Date.UTC(jso.x),
    279.                 y: parseFloat(jso.y),
    280.                 name: jso.name,
    281.                 image: jso.image
    282.               });
    283.               $('#container').highcharts(options);
    284.             }
    285.           })
    286.       });
    287. </script>
    复制代码


    )TUE4O5O{CXI(5Y3BIQ0Z25.png
  • TA的每日心情
    开心
    2017-7-3 16:56
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    7

    主题

    79

    帖子

    300

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    300
     楼主| 发表于 2017-7-3 17:18:18 | 显示全部楼层
    $.ajax({
            url: 'pdo.php',
            type: 'POST',
            success: function(data) {
              var jso = eval(data);
              $.each(jso, function(i, o) {
                  options.series[0].data.push({
                    x: Date.UTC(jso.x),
                    y: parseFloat(jso.y),
                    name: jso.name,
                    image: jso.image
                  });
                  $('#container').highcharts(options);
                }
              })

    这段是关键代码
  • TA的每日心情
    奋斗
    2017-7-7 09:58
  • 签到天数: 4 天

    [LV.2]偶尔看看I

    3

    主题

    8

    帖子

    38

    积分

    HC 新手

    Rank: 1

    积分
    38
    发表于 2017-7-4 18:48:03 | 显示全部楼层
    能看一下json传输的内容么,json里存储为字符串的日期能不能被Date.UTC处理?
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    快速回复 返回顶部 返回列表