2. 程式人生 > >web開發中常用的幾種統計圖使用

web開發中常用的幾種統計圖使用

阿新 • • 發佈：2019-01-13

最近，筆者結合自己在公司專案使用統計圖的經驗以及自己的研究，對地圖統計、柱形圖統計、餅圖統計以及折線圖統計這幾種常用的統計作以歸納。主要使用到的js框架是highstock.js，一種完全基於javascript的前端框架。接下來，一一進行講解。

一、地圖統計

這裡寫圖片描述
這裡，地圖使用的外掛是fusionmaps，是離線的.swf格式的圖片。首先，來看看menu1.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String
 
 path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
 
>
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>Menu1</title>
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/icon.css">
</head
 
>
<body>
<h2>地圖統計</h2>

<div id='dataForMap' style="height: 485px;">

<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery-1.8.0.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/plugs/fusionmaps/FusionCharts.js"></script>
<script type="text/javascript" src="resources/logicJS/graph/menu1.js"></script>
</body>
</html>

對應的menu1.js:

$(function() {
  console.log('開始載入地市圖。。。');
  //地圖基本樣式
  var MAP_STYLE = "<map " + "baseFontSize='11' " + "baseFontColor='363636' "
      + "fillAlpha='100' " + "hoverColor='CAE7F0' " + "BorderColor='ffffff' "
      + "showBevel='0' " + "formatNumberScaleBoolean='0' "
      + "showShadow='0' animation='1' " + "legendScrollBtnColor='ffffff' "
      + "showCanvasBorder='0' " + "showToolTipShadow='0' "
      + "toolTipBorderColor='ffffff' " + "showLegend='0' "
      + "legendBorderThickness='0' " + "legendBorderColor='ffffff' "
      + "legendShadow='0'>";
  //顏色陣列
  var colorArr = [ '#A4EDFF', '#56D9FF', '#01C0F7', '#169EFF', '#0082DE',
      '#006DBA' ];
  //設定不同分類的顏色
  var kindStatCharXml = MAP_STYLE + "<colorRange>"
      + "<color minValue='1' maxValue='10' color='" + colorArr[0] + "' />"
      + "<color minValue='11' maxValue='100' color='" + colorArr[1] + "' />"
      + "<color minValue='101' maxValue='1000' color='" + colorArr[2] + "' />"
      + "<color minValue='1001' maxValue='10000' color='" + colorArr[3]
      + "' />" + "<color minValue='10001' maxValue='100000' color='"
      + colorArr[4] + "' />"
      + "<color minValue='100001' maxValue='1000000' color='" + colorArr[5]
      + "' />" + "</colorRange><data>";
  //模擬的資料
  var data = [ {
    remark : 'CN.ZJ',
    name : '浙江',
    countNum : 179734
  }, {
    remark : 'CN.BJ',
    name : '北京',
    countNum : 111
  }, {
    remark : 'CN.FJ',
    name : '福建',
    countNum : 222
  }, {
    remark : 'CN.SH',
    name : '上海',
    countNum : 933734
  }, {
    remark : 'CN.JS',
    name : '江蘇',
    countNum : 9334
  }, {
    remark : 'CN.AH',
    name : '安徽',
    countNum : 734
  },{
    remark : 'CN.XJ',
    name : '新疆',
    countNum : 7334
  },{
    remark : 'CN.AH',
    name : '安徽',
    countNum : 7234
  },{
    remark : 'CN.XZ',
    name : '西藏',
    countNum : 734
  },{
    remark : 'CN.QH',
    name : '青海',
    countNum : 1734
  },{
    remark : 'CN.GS',
    name : '甘肅',
    countNum : 7354
  } ];
  //遍歷資料
  for (var i = 0; i < data.length; i++) {
    var one = data[i];
    kindStatCharXml = kindStatCharXml + "<entity id='" + one.remark + "' "
        + "displayValue='" + one.name + "' " + "value='" + one.countNum + "' "
        + "toolText='" + one.name + "," + one.countNum + "' link='http://www.baidu.com?remark=" + one.remark +"'/> "
  }

  kindStatCharXml = kindStatCharXml + " </data> </map>";
  var showChart1 = new FusionCharts("js/plugs/fusionmaps/swf/FCMap_China2.swf",
      "chart1", '100%', '100%', "0", "0");
  showChart1.setDataXML(kindStatCharXml);
  showChart1.render('dataForMap');
});

二、柱形圖統計

這裡寫圖片描述
柱形圖、餅圖、折線圖都是使用的highstock外掛，下面直接貼出程式碼。
jsp程式碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>Menu2</title>
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/icon.css">
<style type="text/css">
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red} 
a:visited { text-decoration: none;color: green}
</style>
</head>
<body>
<h2>柱形圖統計</h2>

<div style="margin-top:40px;width:100%" id='dataForColumn'></div>

<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery-1.8.0.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/plugs/highstock/highstock.js"></script>
<script type="text/javascript" src="resources/logicJS/graph/menu2.js"></script>
</body>
</html>

js程式碼：

$(function() {
  console.log('開始載入柱形圖。。。');

  //模擬資料
  var data = [{
    code: '百度',
    countNum:10,
    count1Num:11
  },{
    code: '谷歌',
    countNum:100,
    count1Num:50
  },{
    code: '360',
    countNum:30,
    count1Num:41
  },{
    code: '新浪',
    countNum:70,
    count1Num:51
  },{
    code: '阿里',
    countNum:80,
    count1Num:15
  }];

  //男陣列
  var manArray = [];

  //女陣列
  var womanArray = [];

  //業務型別值陣列
  var categories = [];

  //男生比率map
  var sexRateMap = [];

  for(var i = 0; i < data.length; i++) {
    manArray.push(data[i].countNum);
    womanArray.push(data[i].count1Num);
    categories.push(data[i].code);

    //計算比率，保留1位小數
    sexRateMap[data[i].code] = (data[i].countNum / (data[i].countNum + data[i].count1Num) * 100).toFixed(1) + '%';
  }

  //建立柱形圖
  $('#dataForColumn').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: '企業員工性別統計(個數)'
    },
    xAxis: {
        categories: categories,
        crosshair: true,
        labels: {
          rotation:-90
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '個數'
        }
    },
    tooltip: {
      formatter: function() {
        var html = '<span style="font-size:10px">' + this.x + '</span><table>';
        for (var i = 0; i < this.points.length; i ++) {
          var point = this.points[i];
          if (point.series.name == '男') {
            html += '<tr><td style="color:#0a6ea1;padding:0">男: </td>';
            html += '<td style="padding:0"><a href="http://blog.csdn.net/qiyongkang520" style=""><b>' + point.y + '個</b></a></td></tr>';
          } else if (point.series.name == '女') {
            html += '<tr><td style="color:#274b6d;padding:0">女: </td>';
            html += '<td style="padding:0"><a href="http://blog.csdn.net/qiyongkang520"><b>' + point.y + '個</b></a></td></tr>';
          }
        }
        html += '<tr><td style="padding:0">男生比率：</td><td style="padding:0">' + sexRateMap[this.x] + '</td></tr></table>';
        return html;
      },
      shared: true,
      useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    credits:{
      enabled: true,
      href: "http://blog.csdn.net/qiyongkang520",
      text: 'qiyongkang'
    },
    series: [{
        name: '男',
        data: manArray
    }, {
        name: '女',
        data: womanArray
    }]
  });

});

三、餅圖統計

這裡寫圖片描述
jsp程式碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>Menu3</title>
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/icon.css">
<style type="text/css">
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red} 
a:visited { text-decoration: none;color: green}
</style>
</head>
<body>
<h2>餅圖統計</h2>

<div style="margin-top:40px;width:100%" id='dataForPie'></div>

<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery-1.8.0.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/plugs/highstock/highstock.js"></script>
<script type="text/javascript" src="resources/logicJS/graph/menu3.js"></script>
</body>
</html>

js程式碼：

$(function() {
  console.log('開始載入餅圖。。。');

  //模擬資料
  var data = [['武昌區', 100], ['洪山區', 200], ['江夏區', 300], ['其它', 250]];

  //建立餅圖
  $("#dataForPie").highcharts({
    chart : {
      plotBackgroundColor : null,
      plotBorderWidth : null,
      plotShadow : false
    },
    title : {
      text : '武漢市各地區人數統計'
    },
    plotOptions : {
      pie : {
        allowPointSelect : true,
        cursor : 'pointer',
        dataLabels : {
          enabled : true,
//          format : '<b>{point.name}</b>: <a href="http://blog.csdn.net/qiyongkang520">{point.percentage:.1f} %</a>'
          formatter: function() {
            var html = '';
            html += '<b>' + this.point.name + '</b>:<a href="http://blog.csdn.net/qiyongkang520">';
            html += this.percentage.toFixed(1) + '%</a>';
            return html;
          }
        },
        showInLegend : true
      }
    },
    credits : {
      enabled : true,
      href: "http://blog.csdn.net/qiyongkang520",
      text: 'qiyongkang'
    },
    series : [ {
      type : 'pie',
      name : '各區人數統計',
      data : data
    } ]
  });

});

四、折線圖

這裡寫圖片描述
jsp程式碼：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
  String path = request.getContextPath();
  String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Cache-Control" CONTENT="no-cache">
<title>Menu4</title>
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="resources/jquery-easyui-1.4.2/themes/icon.css">
<style type="text/css">
a:link { text-decoration: none;color: blue}
a:active { text-decoration:blink}
a:hover { text-decoration:underline;color: red} 
a:visited { text-decoration: none;color: green}
</style>
</head>
<body>
<h2>折線圖統計</h2>

<div style="margin-top:40px;width:100%" id='dataForLine'></div>

<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery-1.8.0.js"></script>
<script type="text/javascript" src="resources/jquery-easyui-1.4.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/plugs/highstock/highstock.js"></script>
<script type="text/javascript" src="resources/logicJS/graph/menu4.js"></script>
</body>
</html>

js程式碼：

$(function() {
  console.log('開始載入折線圖。。。');
  // 模擬資料
  var data = '["[Date.UTC(2014,3,20),972,55]","[Date.UTC(2014,3,21),4332,452]","[Date.UTC(2014,3,22),687,45]","[Date.UTC(2014,3,23),1012,57]","[Date.UTC(2014,3,24),838,40]","[Date.UTC(2014,3,25),876,47]","[Date.UTC(2014,3,26),850,43]","[Date.UTC(2014,3,27),918,56]","[Date.UTC(2014,3,28),808,39]","[Date.UTC(2014,3,29),388,14]","[Date.UTC(2014,3,30),74,8]","[Date.UTC(2014,4,1),43,3]","[Date.UTC(2014,4,2),33,3]","[Date.UTC(2014,4,3),50,7]","[Date.UTC(2014,4,4),51,8]","[Date.UTC(2014,4,5),66,3]","[Date.UTC(2014,4,6),24,4]","[Date.UTC(2014,4,7),16,2]","[Date.UTC(2014,4,8),34,4]","[Date.UTC(2014,4,9),65,9]","[Date.UTC(2014,4,10),46,7]","[Date.UTC(2014,4,11),23,2]","[Date.UTC(2014,4,12),59,7]","[Date.UTC(2014,4,13),52,8]","[Date.UTC(2014,4,14),53,5]","[Date.UTC(2014,4,15),56,5]","[Date.UTC(2014,4,16),33,2]","[Date.UTC(2014,4,17),24,3]","[Date.UTC(2014,4,18),30,2]","[Date.UTC(2014,4,19),38,4]","[Date.UTC(2014,4,20),23,1]","[Date.UTC(2014,4,21),41,6]","[Date.UTC(2014,4,22),27,0]","[Date.UTC(2014,4,23),15,1]","[Date.UTC(2014,4,26),163,16]","[Date.UTC(2014,4,27),630,42]","[Date.UTC(2014,4,28),404,14]","[Date.UTC(2014,4,29),418,18]","[Date.UTC(2014,4,30),397,20]","[Date.UTC(2014,4,31),192,10]","[Date.UTC(2014,5,1),109,6]","[Date.UTC(2014,5,2),119,7]","[Date.UTC(2014,5,3),265,8]","[Date.UTC(2014,5,4),208,12]","[Date.UTC(2014,5,5),75,4]","[Date.UTC(2014,5,6),156,6]","[Date.UTC(2014,5,7),286,11]","[Date.UTC(2014,5,8),44,2]","[Date.UTC(2014,5,11),131,10]","[Date.UTC(2014,5,12),404,22]","[Date.UTC(2014,5,13),50,4]","[Date.UTC(2014,5,14),4,1]","[Date.UTC(2014,5,15),21,0]","[Date.UTC(2014,5,16),31,2]","[Date.UTC(2014,5,18),28,0]","[Date.UTC(2014,5,19),97,4]","[Date.UTC(2014,5,20),85,1]","[Date.UTC(2014,5,21),4060,54]","[Date.UTC(2014,5,22),2646,45]","[Date.UTC(2014,5,23),1688,31]","[Date.UTC(2014,5,24),1349,30]","[Date.UTC(2014,5,25),2605,46]","[Date.UTC(2014,5,26),2125,27]","[Date.UTC(2014,5,27),1360,33]","[Date.UTC(2014,5,28),1337,43]","[Date.UTC(2014,5,29),672,21]","[Date.UTC(2014,5,30),447,10]","[Date.UTC(2014,6,1),1985,50]","[Date.UTC(2014,6,2),1307,24]","[Date.UTC(2014,6,3),1319,34]","[Date.UTC(2014,6,4),832,27]","[Date.UTC(2014,6,5),683,12]","[Date.UTC(2014,6,6),691,16]","[Date.UTC(2014,6,7),416,9]","[Date.UTC(2014,6,8),373,7]","[Date.UTC(2014,6,9),455,11]","[Date.UTC(2014,6,10),540,14]","[Date.UTC(2014,6,11),498,14]","[Date.UTC(2014,6,12),361,11]","[Date.UTC(2014,6,13),474,15]","[Date.UTC(2014,6,14),447,14]","[Date.UTC(2014,6,15),544,14]","[Date.UTC(2014,6,16),477,11]","[Date.UTC(2014,6,17),503,13]","[Date.UTC(2014,6,18),196,7]","[Date.UTC(2014,6,19),527,15]","[Date.UTC(2014,6,20),519,14]","[Date.UTC(2014,6,21),287,2]","[Date.UTC(2014,6,22),430,9]","[Date.UTC(2014,6,23),459,11]","[Date.UTC(2014,6,24),429,11]","[Date.UTC(2014,6,25),936,15]","[Date.UTC(2014,6,26),763,10]","[Date.UTC(2014,6,27),545,8]","[Date.UTC(2014,6,28),555,4]","[Date.UTC(2014,6,29),471,7]","[Date.UTC(2014,6,30),295,6]","[Date.UTC(2014,6,31),127,0]","[Date.UTC(2014,7,1),251,9]","[Date.UTC(2014,7,2),232,6]","[Date.UTC(2014,7,3),168,5]","[Date.UTC(2014,7,4),136,3]","[Date.UTC(2014,7,5),218,10]","[Date.UTC(2014,7,6),220,5]","[Date.UTC(2014,7,7),234,8]","[Date.UTC(2014,7,8),239,4]","[Date.UTC(2014,7,9),277,3]","[Date.UTC(2014,7,10),262,5]","[Date.UTC(2014,7,11),220,6]","[Date.UTC(2014,7,12),10,0]","[Date.UTC(2014,7,14),10,0]","[Date.UTC(2014,7,16),436,6]","[Date.UTC(2014,7,17),351,13]","[Date.UTC(2014,7,18),335,13]","[Date.UTC(2014,7,19),30,1]","[Date.UTC(2014,7,20),182,15]","[Date.UTC(2014,7,21),331,13]","[Date.UTC(2014,7,22),292,3]","[Date.UTC(2014,7,23),507,23]","[Date.UTC(2014,7,24),9,2]","[Date.UTC(2014,7,26),1,0]","[Date.UTC(2014,7,27),733,16]","[Date.UTC(2014,7,28),603,18]","[Date.UTC(2014,7,29),507,20]","[Date.UTC(2014,7,30),636,29]","[Date.UTC(2014,7,31),432,16]","[Date.UTC(2014,8,1),339,16]","[Date.UTC(2014,8,2),212,7]","[Date.UTC(2014,8,3),321,4]","[Date.UTC(2014,8,5),615,21]","[Date.UTC(2014,8,6),395,5]","[Date.UTC(2014,8,7),136,11]","[Date.UTC(2014,8,8),8,0]","[Date.UTC(2014,8,10),633,22]","[Date.UTC(2014,8,11),21,1]","[Date.UTC(2014,8,12),261,7]","[Date.UTC(2014,8,13),374,8]","[Date.UTC(2014,8,14),318,11]","[Date.UTC(2014,8,15),236,5]","[Date.UTC(2014,8,16),190,4]","[Date.UTC(2014,8,17),135,4]","[Date.UTC(2014,8,18),231,11]","[Date.UTC(2014,8,19),248,14]","[Date.UTC(2014,8,20),393,14]","[Date.UTC(2014,8,21),268,12]","[Date.UTC(2014,8,22),314,12]","[Date.UTC(2014,8,23),228,5]","[Date.UTC(2014,8,24),167,11]","[Date.UTC(2014,8,25),192,8]","[Date.UTC(2014,8,26),199,6]","[Date.UTC(2014,8,27),182,8]","[Date.UTC(2014,8,28),141,2]","[Date.UTC(2014,8,29),254,7]","[Date.UTC(2014,8,30),388,11]","[Date.UTC(2014,9,1),498,13]","[Date.UTC(2014,9,2),1669,38]","[Date.UTC(2014,9,3),1155,33]","[Date.UTC(2014,9,4),449,28]","[Date.UTC(2014,9,5),248,12]","[Date.UTC(2014,9,6),164,6]","[Date.UTC(2014,9,9),203,3]","[Date.UTC(2014,9,10),10,0]","[Date.UTC(2014,9,11),833,39]","[Date.UTC(2014,9,12),269,14]","[Date.UTC(2014,9,13),159,11]","[Date.UTC(2014,9,14),212,7]","[Date.UTC(2014,9,15),206,9]","[Date.UTC(2014,9,16),288,7]","[Date.UTC(2014,9,17),223,6]","[Date.UTC(2014,9,18),284,10]","[Date.UTC(2014,9,19),227,9]","[Date.UTC(2014,9,20),177,11]","[Date.UTC(2014,9,21),154,6]","[Date.UTC(2014,9,22),124,9]","[Date.UTC(2014,9,24),420,14]","[Date.UTC(2014,9,25),63,7]","[Date.UTC(2014,9,28),440,21]","[Date.UTC(2014,9,29),305,7]","[Date.UTC(2014,9,30),263,11]","[Date.UTC(2014,9,31),480,16]","[Date.UTC(2014,10,1),354,17]","[Date.UTC(2014,10,2),235,11]","[Date.UTC(2014,10,3),202,7]","[Date.UTC(2014,10,4),242,8]","[Date.UTC(2014,10,5),192,4]","[Date.UTC(2014,10,6),226,5]","[Date.UTC(2014,10,7),226,13]","[Date.UTC(2014,10,8),184,8]","[Date.UTC(2014,10,9),69,4]","[Date.UTC(2014,10,11),466,21]","[Date.UTC(2014,10,12),1,0]","[Date.UTC(2014,10,13),415,19]","[Date.UTC(2014,10,14),253,10]","[Date.UTC(2014,10,15),228,7]","[Date.UTC(2014,10,17),459,37]","[Date.UTC(2014,10,18),40,2]","[Date.UTC(2014,10,19),137,6]","[Date.UTC(2014,10,20),243,11]","[Date.UTC(2014,10,21),1004,40]","[Date.UTC(2014,10,22),1393,88]","[Date.UTC(2014,10,23),458,23]","[Date.UTC(2014,10,24),249,13]","[Date.UTC(2014,10,25),224,14]","[Date.UTC(2014,10,26),169,6]","[Date.UTC(2014,10,27),240,12]","[Date.UTC(2014,11,1),836,43]","[Date.UTC(2014,11,2),40,1]","[Date.UTC(2014,11,3),24,0]","[Date.UTC(2014,11,4),23,3]","[Date.UTC(2014,11,6),11,4]","[Date.UTC(2014,11,7),125,6]","[Date.UTC(2014,11,8),322,22]","[Date.UTC(2014,11,9),269,15]","[Date.UTC(2014,11,10),132,7]","[Date.UTC(2014,11,11),430,24]","[Date.UTC(2014,11,12),477,14]","[Date.UTC(2014,11,14),761,45]","[Date.UTC(2014,11,15),249,16]","[Date.UTC(2014,11,16),421,15]","[Date.UTC(2014,11,17),240,7]","[Date.UTC(2014,11,19),669,36]","[Date.UTC(2014,11,20),243,14]","[Date.UTC(2014,11,21),245,12]","[Date.UTC(2014,11,22),234,17]","[Date.UTC(2014,11,23),223,12]","[Date.UTC(2014,11,25),312,28]","[Date.UTC(2014,11,27),34,1]","[Date.UTC(2014,11,28),256,16]","[Date.UTC(2014,11,29),137,6]","[Date.UTC(2014,11,30),153,7]","[Date.UTC(2014,11,31),336,23]","[Date.UTC(2015,0,1),533,17]","[Date.UTC(2015,0,3),554,28]","[Date.UTC(2015,0,4),257,22]","[Date.UTC(2015,0,5),59,2]","[Date.UTC(2015,0,6),563,29]","[Date.UTC(2015,0,7),287,18]","[Date.UTC(2015,0,8),11,1]","[Date.UTC(2015,0,9),395,35]","[Date.UTC(2015,0,10),214,19]","[Date.UTC(2015,0,11),228,13]","[Date.UTC(2015,0,12),305,22]","[Date.UTC(2015,0,13),308,21]","[Date.UTC(2015,0,14),164,9]","[Date.UTC(2015,0,15),24,2]","[Date.UTC(2015,0,16),180,12]","[Date.UTC(2015,0,18),482,44]","[Date.UTC(2015,0,19),7,1]","[Date.UTC(2015,0,20),250,23]","[Date.UTC(2015,0,22),260,18]","[Date.UTC(2015,0,24),357,24]","[Date.UTC(2015,0,25),485,38]","[Date.UTC(2015,0,26),413,44]","[Date.UTC(2015,0,27),743,66]","[Date.UTC(2015,0,28),774,64]","[Date.UTC(2015,0,29),486,41]","[Date.UTC(2015,0,30),408,36]","[Date.UTC(2015,0,31),285,38]","[Date.UTC(2015,1,1),291,27]","[Date.UTC(2015,1,2),270,29]","[Date.UTC(2015,1,3),197,22]","[Date.UTC(2015,1,4),189,23]","[Date.UTC(2015,1,5),257,26]","[Date.UTC(2015,1,6),300,17]","[Date.UTC(2015,1,7),323,26]","[Date.UTC(2015,1,8),442,76]","[Date.UTC(2015,1,9),268,26]","[Date.UTC(2015,1,10),6,1]","[Date.UTC(2015,1,11),272,24]","[Date.UTC(2015,1,12),249,29]","[Date.UTC(2015,1,14),474,57]","[Date.UTC(2015,1,15),16,2]","[Date.UTC(2015,1,16),234,25]","[Date.UTC(2015,1,17),235,29]","[Date.UTC(2015,1,18),191,22]","[Date.UTC(2015,1,19),123,17]","[Date.UTC(2015,1,20),131,14]","[Date.UTC(2015,1,22),138,20]","[Date.UTC(2015,1,23),7,1]","[Date.UTC(2015,1,24),84,9]","[Date.UTC(2015,1,26),163,24]","[Date.UTC(2015,1,27),64,4]","[Date.UTC(2015,1,28),114,12]","[Date.UTC(2015,2,1),158,21]","[Date.UTC(2015,2,2),152,23]","[Date.UTC(2015,2,3),219,20]","[Date.UTC(2015,2,4),142,15]","[Date.UTC(2015,2,5),159,18]","[Date.UTC(2015,2,6),204,28]","[Date.UTC(2015,2,7),259,36]","[Date.UTC(2015,2,8),239,25]","[Date.UTC(2015,2,9),219,13]","[Date.UTC(2015,2,10),191,40]","[Date.UTC(2015,2,11),211,19]","[Date.UTC(2015,2,13),384,47]","[Date.UTC(2015,2,14),138,15]","[Date.UTC(2015,2,15),258,41]","[Date.UTC(2015,2,16),247,48]","[Date.UTC(2015,2,17),262,46]","[Date.UTC(2015,2,18),308,48]","[Date.UTC(2015,2,19),296,45]","[Date.UTC(2015,2,20),102,13]","[Date.UTC(2015,2,21),255,42]","[Date.UTC(2015,2,22),313,36]","[Date.UTC(2015,2,23),247,27]","[Date.UTC(2015,2,24),6,0]","[Date.UTC(2015,2,25),469,82]","[Date.UTC(2015,2,26),281,41]","[Date.UTC(2015,2,27),249,39]","[Date.UTC(2015,2,28),227,29]","[Date.UTC(2015,2,29),262,30]","[Date.UTC(2015,2,30),5,0]","[Date.UTC(2015,2,31),1,0]","[Date.UTC(2015,3,1),201,33]","[Date.UTC(2015,3,2),579,86]","[Date.UTC(2015,3,4),423,68]","[Date.UTC(2015,3,5),146,31]","[Date.UTC(2015,3,6),270,74]","[Date.UTC(2015,3,8),75,16]","[Date.UTC(2015,3,12),1528,381]","[Date.UTC(2015,3,14),267,86]","[Date.UTC(2015,3,15),1,0]","[Date.UTC(2015,3,16),1,0]","[Date.UTC(2015,3,18),694,203]","[Date.UTC(2015,3,20),889,194]","[Date.UTC(2015,3,21),584,112]","[Date.UTC(2015,3,22),655,139]","[Date.UTC(2015,3,23),363,56]","[Date.UTC(2015,3,24),343,71]","[Date.UTC(2015,3,29),423,79]","[Date.UTC(2015,4,1),6,2]","[Date.UTC(2015,4,2),1,0]","[Date.UTC(2015,4,3),988,253]","[Date.UTC(2015,4,5),29,6]","[Date.UTC(2015,4,7),1171,317]","[Date.UTC(2015,4,8),246,65]","[Date.UTC(2015,4,9),715,623]","[Date.UTC(2015,4,10),1158,602]","[Date.UTC(2015,4,11),5,5]","[Date.UTC(2015,4,13),1751,1578]","[Date.UTC(2015,4,14),17,17]","[Date.UTC(2015,4,16),3288,2871]","[Date.UTC(2015,4,17),1478,1268]","[Date.UTC(2015,4,18),5,4]","[Date.UTC(2015,4,19),2199,1894]","[Date.UTC(2015,4,21),2090,1847]","[Date.UTC(2015,4,22),449,382]","[Date.UTC(2015,4,23),3012,2939]","[Date.UTC(2015,4,25),368,362]","[Date.UTC(2015,4,26),2180,2110]","[Date.UTC(2015,4,27),1695,1686]","[Date.UTC(2015,4,29),343,343]","[Date.UTC(2015,4,30),102,102]","[Date.UTC(2015,5,1),80,76]"]';

  //去掉“，轉化成物件
  var reg = new RegExp('"', "g");
  resultText = data.replace(reg, "");
  var resultJson = eval(resultText);

  // 建立折線圖
  $('#dataForLine').highcharts('StockChart', {
    credits : {
      enabled : false,
      href : "http://blog.csdn.net/qiyongkang520",
      text : 'qiyongkang'
    },

    rangeSelector : {
      inputDateFormat : '%Y-%m-%d',
      buttons : [],
      selected : 5
    },

    xAxis : {
      dateTimeLabelFormats : {
        second : '%H:%M:%S',
        minute : '%H:%M',
        hour : '%H:%M',
        day : '%Y<br/>%m-%d',
        week : '%Y<br/>%m-%d',
        month : '%Y-%m',
        year : '%Y'
      },
      minTickInterval : 24 * 3600 * 1000
    },

    yAxis : {},

    navigator : {
      xAxis : {
        dateTimeLabelFormats : {
          second : '%H:%M:%S',
          minute : '%H:%M',
          hour : '%H:%M',
          day : '%Y-%m-%d',
          week : '%Y-%m-%d',
          month : '%Y-%m',
          year : '%Y'
        }
      }
    },

    title : {
      text : '每天食堂人流量變化趨勢'
    },

    tooltip : {
      xDateFormat : '%Y-%m-%d' // 滑鼠移動到趨勢線上時顯示的日期格式
    },

    series : [ {
      name : '人流量',
      data : resultJson
    } ]
  });

});

五、總結

統計在我們的專案中經常用到，一個比較形象的統計圖便很能說明問題，所以大家可以嘗試去通過highstock這個外掛實現，另外，highstock提供的統計圖型別有很多，筆者瞭解也就這幾個，其它的大家有興趣也可以去研究。同時筆者寫得有問題的位置也歡迎指出，謝謝！

相關推薦

web開發中常用的幾種統計圖使用

最近，筆者結合自己在公司專案使用統計圖的經驗以及自己的研究，對地圖統計、柱形圖統計、餅圖統計以及折線圖統計這幾種常用的統計作以歸納。主要使用到的js框架是highstock.js，一種完全基於javascript的前端框架。接下來，一一進行講解。 一、地圖

R中的幾種統計分佈及常用模型 (整理)

蒐集自Little_Rookie部落格園，以下部分格式和內容有所修正和補充，歡迎轉載~ 李陽  15應用統計學 內蒙古財經大學 統計學上分佈有很多，在R中基本都有描述。因能力有限，我們就挑選幾個常用的、比較重要的簡單介紹一下每種分佈的定義，公式，以及在Ｒ中的展示。 統計

iOS 開發中的幾種設計模式

設計模式 開發 模式 ios 設計 iOS 開發中的幾種設計模式

Web開發中常用中文字體名稱的英文對應

字體 HTML CSS 說明： 加上中文名“微軟雅黑”是為了兼容opera。 MicrosoftJhengHei為微軟正黑體，STHeiti為華文黑體，MingLiu記得11px下的中文有著不凡的效果。 在css中推薦使用中文字體的英文表示法，以下附常見中文字體的英文名： Mac OS： 華文細黑

web開發中常用的jquery動畫效果

1、隱藏&顯示 設定元素的隱藏，顯示功能，語法如下： jquery show(speed ，callback); jquery hide(speed ，callback); jquery togger(speed ，callback); 說明：引數不是必須的，在

對於前端開發中的幾種佈局方式的理解

一，靜態佈局（Static Layout） 在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分； 意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置 二，彈性佈局（Elastc Layout） 是CSS3引入的佈局方式，其中flex-flow是flex-di

IOS開發中的幾種設計模式介紹

ios開發學習中，經常弄不清楚ios的開發模式，今天我們就來進行簡單的總結和探討~ （一）代理模式 應用場景：當一個類的某些功能需要由別的類來實現，但是又不確定具體會是哪個類實現。 優勢：解耦合 敏捷原則：開放-封閉原則 例項：tableview的 資料來源delegate

Java web開發中常用到的jar包簡介

1.Java開發中主要用到的jar包介紹:（1）java JDK基礎開發包：java包和javax包。書寫方式：import java.lang.reflect.InvocationTargetException; import java.util.HashMap; imp

開發中sqlite幾種常見的使用場景

場景一：需要備份整個資料庫結構以及資料；步驟：1、使用sqlite3命令進入sqlite終端：sqlite3 test.db2、.output test.sql3、.dump4、退出sqlite終端，l

WEB開發中常用的協議和標準

DNS協議1、DNS協議的作用是將域名解析為IP，網路上的每個站點的位置是用IP來確定的，訪問一個網站首先就要知道它的IP，不過資料組成的IP記起來不方便，所以就使用域名來代替IP，由於IP和域名的對應關係經常變化，所以就需要有專門將域名解析為IP的伺服器，我們稱為：DNS伺

歸納AOP在Android開發中的幾種常見用法

AOP 是什麼 在軟體業，AOP為Aspect Oriented Programming的縮寫，意為：面向切面程式設計，通過預編譯方式和執行期動態代理實現程式功能的統一維護的一種技術。AOP是OOP的延續，是軟體開發中的一個熱點，是函數語言程式設計的一種衍生範型。利用

Android第一天---開發中常用的幾種佈局

第一種：LinearLayout:線性佈局 線性佈局是按照處置或者水平進行排布的，預設是水平 屬性：orientation：用來指定當前的線性佈局的排布方向。 wrap_content：包裹內容 match_parent：匹配父類 margin：外邊距 padding

WPF開發中常用的幾種佈局元素

Grid：網格。可以自定義行和列並通過行列的數量、行高和行寬來調整控制元件的佈局，類似於HTML中的Table。 StackPanel：棧式模板。可將包含的元素在豎直或水平方向上排成一條直線，當移除一個元素後，後面的元素會自動向前移動以填充空缺。 Canvas：畫布。內部元素可以使用以畫素為單位的絕對座標

Web開發中 前端路由 實現的幾種方式和適用場景

故事從名叫Oliver的綠箭蝦`說起，這位大蝦酷愛社交網站，一天他打開了 Twitter ，從發過的tweets的選項卡一路切到followers選項卡，Oliver發現頁面的內容變化了，URL也變化了，但為什麼頁面沒有閃爍重新整理呢？於是Oliver開啟的網路監控器（沒錯，Oliver是個程式設計師），他驚

Web開發中跨域的幾種解決方案

隨著Web App的功能越來越強 各種跨域的需求催生了無數的跨域手法。甚至在HTML5標準中都給出了官方的跨域方法， 也是最近應付面試的需要，拿一篇文章來總結既有的各種跨域手段。 這些跨域通訊的方法大致可以分為兩類： 一類是Hack，比如通過title, navigation等物件傳遞資訊，JSONP可

【Android 開發】：Android佈局中的幾種常用屬性

1. 為了適應各種介面風格，Android提供了5種佈局，這5種佈局分別是： 1) 線性佈局: LinearLayout 2) 幀佈局:  FrameLayout 3) 相對佈局: Relat

ios開發中常用的幾種輔助方法

//1.Keychain本地長期鍵值儲存 //刪除 +(void)deleteStringForKey:(NSString *)aKey { NSMutableDictionary *query = [NSMutableDictionary dictionary];

說一說Web開發中兩種常用的分層架構及其對應的程式碼模型

昨天妹子讓我幫她解決個問題，本以為可以輕鬆搞定，但是開啟他們專案的一瞬間，我頭皮發麻。本身功能不多的一個小專案，解決方案裡竟然有幾十個類庫。僅僅搞明白各個類庫的作用，程式碼層次之間的引用關係就花了一個多小時。 顯然可能他們專案結構的程式碼模型出了問題，設計混亂，不容易上手。 專案中一個好的的程式碼模型一定

UML類圖中的幾種關系總結

技術分享 name dos track text ive implement fonts 結構 UML類圖，描寫敘述對象和類之間相互關系的方式包含：依賴（Dependency）、關聯（Association）、聚合（Aggregation）、組合（Com

關於Java集合類庫中的幾種常用隊列

rac syn text 刪除 style asdasd 新元素 其他 arraylist Java中幾種常用的隊列 阻塞隊列與普通隊列的區別在於，當隊列是空的時，從隊列中獲取元素的操作將會被阻塞，或者當隊列是滿時，往隊列裏添加元素的操作會被阻塞。試圖從空的阻塞隊列中獲取元