IT资讯 |  编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

相识Highcharts 几分钟玩转Highcharts

作者:大额_skylar  发布日期:2014-08-22 21:45:48
  • 收藏本文    我要投稿
  •    Highcharts是一个功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库。

        官网:http://www.hcharts.cn/

        

        我觉得对于刚接触一个东西的新手来说,有时候对一个东西真的可能毫无头绪,这个Highcharts的官网做的挺不错的。可以一点点学起。当然,看了下面我自己试着详细注释的代码,你可能看完就知道怎么用它了。了解了它的结构,查起API文档,Highcharts真的蛮简单。希望我可以帮你节省时间,你需要的只是API文档。

        对了,别忘了先去下载highcharts.js这样的必备文件。

        先看代码:

        

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      3 <head>
      4   <title></title>
      5   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      6   <script type="text/javascript" src="jquery-1.11.1.js"></script>
      7   <script type="text/javascript" src="highcharts.js"></script>
      8 </head>
      9 <body >
     10   <div id="container" style="height:400px"></div>
     11   <script>
     12 $(function () {
     13     /*全局配置*/
     14     Highcharts.setOptions({
     15         chart: {
     16             zoomType: 'xy',
     17             /*图表背景颜色*/
     18             backgroundColor: '#ffffff',
     19             borderColor:'#EBBA95',
     20             borderWidth:1,
     21             type: 'line',
     22             /*这里改变字体和设置大小*/
     23             style: {
     24                 fontFamily: "Lucida Sans Unicode",
     25                 fontSize:'12px',
     26             }
     27         }
     28     });
     29     /*容器内highcharts的配置*/
     30     $('#container').highcharts({
     31         /*版权信息*/
     32         credits : {
     33             text:''
     34         },
     35         /*大标题*/
     36         title: {
     37             text: '双Y轴图'
     38         },
     39         /*副标题*/
     40         subtitle: {
     41             text: 'for:订单额和订单百分比'
     42         },
     43         /*x轴*/
     44         xAxis: [{
     45             categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
     46                 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
     47         }],
     48         yAxis: 
     49           [{ // Primary yAxis
     50             labels: {
     51                 format: '{value}%',
     52                 style: {
     53                     color: '#89A54E'
     54                 }
     55             },
     56             title: {
     57                 text: '百分比',
     58                 style: {
     59                     color: '#89A54E'
     60                 }
     61             },
     62             min : 0
     63         }, { // Secondary yAxis
     64             title: {
     65                 text: '订单额',
     66                 style: {
     67                     color: '#4572A7'
     68                 }
     69             },
     70             labels: {
     71                 format: '{value} ',
     72                 style: {
     73                     color: '#4572A7'
     74                 }
     75             },
     76             opposite: true,
     77             min : 0
     78         }],
     79         /*工具提示*/
     80         tooltip: {
     81              /*如果你需要给你图表的某一部分添加某些功能的话,就可以去查找Highcharts的函数库,像这样添加就可以了*/
     82              formatter: function () {
     83                 return '<b>' + this.series.name + '</b><br/>' +
     84                     this.x + ': ' + this.y;
     85             }
     86         },
     87         /*基图的一些参数,数据点配置*/
     88         plotOptions: {
     89           series:{
     90             cursor:'pointer',
     91             /*折线中间白色圆圈*/
     92             marker:{
     93               fillColor:'#FFFFFF',
     94               lineWidth:2,
     95               lineColor:null
     96             },
     97             point:{
     98                 /*数据点的事件,可以有click,mouseOut,mouseOver等*/
     99                 events:{
    100                     click:function(){
    101                         alert('category:'+this.category+',value:'+this.y);
    102                     }
    103                 }
    104             }
    105           }
    106         },
    107         /*图例*/
    108         legend: {
    109             layout: 'vertical',
    110             align: 'left',
    111             x: 520,
    112             verticalAlign: 'top',
    113             y: 500,
    114             floating: true,
    115             backgroundColor: '#FFFFFF'
    116         },
    117         /*数据列,针对每一个数据列都可以配置它的颜色,type等各种信息*/
    118         series: [{
    119             name: '订单数',
    120             color: '#4572A7',
    121             type: 'column',
    122             yAxis: 1,
    123             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    124             tooltip: {
    125                 valueSuffix: ' '
    126             },
    127             /*这一数据列的显示颜色*/
    128             color:'#f29700'
    129 
    130         }, {
    131             name: '百分比',
    132             color: '#89A54E',
    133             type: 'spline',
    134             data: [5.0, 7.9, 8.5, 11.5, 16.2, 11.5, 25.2, 21.5, 13.3, 16.3, 12.9, 6.6],
    135             tooltip: {
    136                 valueSuffix: '%'
    137             },
    138             color:'#f29700'
    139         },
    140         {
    141             name: '订单数',
    142             color: '#4572A7',
    143             type: 'column',
    144             yAxis: 1,
    145             data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    146             tooltip: {
    147                 valueSuffix: ' '
    148             },
    149             color:'#666666'
    150 
    151         }, {
    152             name: '百分比',
    153             color: '#89A54E',
    154             type: 'spline',
    155             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],
    156             tooltip: {
    157                 valueSuffix: '%'
    158             },
    159             color:'#666666'
    160         }]
    161     });
    162 });
    163   </script>
    164 </body>
    165 </html>

    实际上就是在hightcharts({})中进行各个模块的配置即可,所谓的配置就是给各个模块的对象字面量添加你所需要的对象,并给其赋值。

    上面代码配置完成:

    \

    像api文档中提供的两个图,一目了然。

    \

    \

    现在你情况都了解了,只穴ky"http://www.it165.net/qq/" target="_blank" class="keylink">qq08r+qYXBpzsS1tcilsunRr8Xk1sO1xLLOyv2+zb/J0tTBy6OsuNW/qsq8v8nE3LvhuNC+9bLpxvDAtM231M66wc7ezbfQ96OsxuTKtda70qqwtNXVyc/NvKOst9bDxbHwwOC1xLLp1dLG8MC0o6y74beiz9bG5Mq1utzI3dLXoaM8L3A+Cgo8cD48aW1nIHNyYz0="http://www.it165.net/uploadfile/files/2014/0822/2014082220430451.jpg" alt="" />

延伸阅读:

  • 专题推荐