zoukankan      html  css  js  c++  java

  • (jQuery,Highcharts)前端图表系列之一 Highcharts (转)

     转自：http://www.cnblogs.com/gxll1314/archive/2010/10/11/1847770.html

    做为系统开发应用不可缺少的部分，图表可以使系统分析看起来更直观，也可以使系统可以锦上添花，毕竟做统计比较繁琐~使用java的程序员，通常使用jfreechart这个工具去作图，唯一的缺憾是图是静态的jpg，缺乏灵性~其实前台有很多这样的图形控件可以使用。这是个一系列的随笔将介绍几乎所有的前台图形报表的使用。本篇是开篇;

       HighCharts是jQuery的一个插件，当前它并不像其他的jQuery插件那样可以像这样调用

    view sourceprint?
    1 　<SPAN style="TEXT-DECORATION: line-through">$(selector).method();
    2 </SPAN>

       而是采用new关键字

    view sourceprint?
    1 var chart= new class(options);

       先看一个基本的示例

    view sourceprint?
    01 var chart;
    02             $(document).ready(function() {
    03                 chart = new Highcharts.Chart({
    04                     chart: {
    05                         renderTo: 'container',
    06                         defaultSeriesType: 'line',
    07                         marginRight: 130,
    08                         marginBottom: 25
    09                     },
    10                     title: {
    11                         text: 'Monthly Average Temperature',
    12                         x: -20 //center
    13                     },
    14                     subtitle: {
    15                         text: 'Source: WorldClimate.com',
    16                         x: -20
    17                     },
    18                     xAxis: {
    19                         categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
    20                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    21                     },
    22                     yAxis: {
    23                         title: {
    24                             text: 'Temperature (°C)'
    25                         },
    26                         plotLines: [{
    27                             value: 0,
    28                              1,
    29                             color: '#808080'
    30                         }]
    31                     },
    32                     tooltip: {
    33                         formatter: function() {
    34                                 return '<b>'+ this.series.name +'</b><br/>'+
    35                                 this.x +': '+ this.y +'°C';
    36                         }
    37                     },
    38                     legend: {
    39                         layout: 'vertical',
    40                         align: 'right',
    41                         verticalAlign: 'top',
    42                         x: -10,
    43                         y: 100,
    44                         borderWidth: 0
    45                     },
    46                     series: [{
    47                         name: 'Tokyo',
    48                         data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    49                     }, {
    50                         name: 'New York',
    51                         data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
    52                     }, {
    53                         name: 'Berlin',
    54                         data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
    55                     }, {
    56                         name: 'London',
    57                         data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
    58                     }]
    59                 });
    60                   
    61                   
    62             });

    整个配置的关键部分在于series,chart,xAxis,yAxis;

    series接受的数据格式为json Array：

    view sourceprint?
    1 [{},{},{}]
    注意：最后一个数据后面一定不能有逗号，否则在IE系列下会报错，这个在几乎所有的jQuery插件的配置中也会出现的问题，当IE报错的时候，一定要检查是否多写了一个逗号

    配置选项

    chart：

    renderTo//放置图表的容器

    defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

    xAxis,yAxis:

    tickInterval: 15//自定义刻度

    更多

    常见的使用环境

    1：我想显示多个图形报表。这些数据不是循环生成的！因为如果循环生成的话直接$.each就可以了！

    view sourceprint?
    1 var options={
    2      chart:{},
    3      xAxis:{},
    4      yAxis:{},
    5      series:[]
    6 }
    因为大部分的配置属性都是重复的，我们没有必要每次都声明。所以首先声明一个通用的options，然后采用$.extend函数

    注意，我们不希望更改原有的options对象，所以

    view sourceprint?
    1 var o=$.exend({},options,{chart:{},xAxis:{}})
    这样o是options与第三个对象合并后的对象

    view sourceprint?
    01 var options={
    02             chart:{
    03                 x:1,
    04                 y:2
    05             },
    06             data:{
    07                 m:1,
    08                 n:2
    09             }
    10         }
    11 var o=$.extend(
    12           {},options,
    13          {chart:{
    14         x:2},ss:{
    15             u:2,
    16             f:2
    17         }})
    18 var o2=$.extend({},options,{data:{}})
    19 //console.log(o);
    20   
    21 var chart=new Highcharts.Chart(o);
    22 var chart2=new Highcharts.Chart(o2);

    2: 从服务器获取数据动态生成运行曲线

    曲线是从服务器获取的点连接而成。我们将点输出到报表上，连接就可以组成动态曲线。

    使用的方法

    配置chart:{

    events:{

       load:requestData

      }

    } ,

    series: [{ name: '服务器数据', data: [] }]

    方法:

    chart.series[0].addPoint([x,y], true, shift);

    view sourceprint?
    01 var x=-10;
    02 $(document).ready(function(){
    03     chart = new Highcharts.Chart({
    04         chart: {
    05             renderTo: 'container',
    06             defaultSeriesType: 'spline',
    07             events: {
    08                 load: requestData
    09             }
    10         },
    11         tooltip:{
    12             formatter: function() {
    13                return ''+ this.series.name +'<br/>'+
    14                 '时间 : '+ this.x +'<br/>'+
    15                 '价格: '+ this.y;
    16              }
    17         },
    18         title: {
    19             text: '运行曲线'
    20         },
    21         xAxis: {
    22             //type: 'linear',
    23             //tickPixelInterval: 10,
    24             maxZoom: 60*3,
    25             min:0,
    26             minPadding:0.2
    27         },
    28         yAxis: {
    29             minPadding: 0.2,
    30             maxPadding: 0.2,
    31             title: {
    32                 text: 'Value',
    33                 margin: 80
    34             }
    35         },
    36         series: [{
    37             name: '服务器数据',
    38             data: []
    39         }//,{
    40             //name:"fuww",
    41             //data:[]
    42         //}
    43         ]
    44     });
    45 function requestData() {
    46     $.ajax({
    47         url: 'orderAuction.action',
    48         success: function(point) {
    49             var series = chart.series[0],
    50             shift = series.data.length > 20;
    51             var s=eval('('+point+')');
    52             var y=s.initial.price;
    53             var z=s.initial.change;
    54             chart.series[0].addPoint([x,y], true, shift);
    55             // call it again after one second
    56            timett = setTimeout('requestData()', 1000);
    57            //timett = setInterval(requestData,1000);
    58         },
    59         cache: false
    60     });
    61     x=x+10;
    62 }
    3:定义主题

    最重要的是colors选项的颜色配置，按显示顺序配置即可！主题显示效果

    view sourceprint?
    01 var theme = {
    02     colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    03     title: {
    04         style: {
    05             color: '#000',
    06             font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
    07         }
    08     },
    09     subtitle: {
    10         style: {
    11             color: '#666666',
    12             font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
    13         }
    14     },
    15     xAxis: {
    16         gridLineWidth: 1,
    17         lineColor: '#000',
    18         tickColor: '#000',
    19         labels: {
    20             style: {
    21                 color: '#000',
    22                 font: '11px Trebuchet MS, Verdana, sans-serif'
    23             }
    24         },
    25         title: {
    26             style: {
    27                 color: '#333',
    28                 fontWeight: 'bold',
    29                 fontSize: '12px',
    30                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
    31               
    32             }
    33         }
    34     },
    35     yAxis: {
    36         alternateGridColor: null,
    37         minorTickInterval: 'auto',
    38         lineColor: '#000',
    39         lineWidth: 1,
    40         tickWidth: 1,
    41         tickColor: '#000',
    42         labels: {
    43             style: {
    44                 color: '#000',
    45                 font: '11px Trebuchet MS, Verdana, sans-serif'
    46             }
    47         },
    48         title: {
    49             style: {
    50                 color: '#333',
    51                 fontWeight: 'bold',
    52                 fontSize: '12px',
    53                 fontFamily: 'Trebuchet MS, Verdana, sans-serif'
    54             }
    55         }
    56     },
    57     legend: {
    58         itemStyle: {
    59             font: '9pt Trebuchet MS, Verdana, sans-serif',
    60             color: 'black'
    61           
    62         },
    63         itemHoverStyle: {
    64             color: '#039'
    65         },
    66         itemHiddenStyle: {
    67             color: 'gray'
    68         }
    69     },
    70     labels: {
    71         style: {
    72             color: '#99b'
    73         }
    74     }
    75 };
    应用主题

    view sourceprint?
    1 Highcharts.setOptions(theme);
    4：饼形图的计算

    饼形图是按照百分比去生成的，不论是后台计算还是前台计算，我们需要将其百分比的总和为100%,所以为了不那么错误的计算，应该使用四舍五入的形式，最后一个数据=100-前面总和。

    5: 基本的图形报表参见官方示例
  • 相关阅读:
    OleDbCommand 的用法
    递归求阶乘
    C#重写窗体的方法
    HDU 5229 ZCC loves strings 博弈
    HDU 5228 ZCC loves straight flush 暴力
    POJ 1330 Nearest Common Ancestors LCA
    HDU 5234 Happy birthday 01背包
    HDU 5233 Gunner II 离散化
    fast-IO
    HDU 5265 pog loves szh II 二分
  • 原文地址：https://www.cnblogs.com/millen/p/2019144.html
Copyright © 2011-2022 走看看