HighCharts日期及数值格式化
1、函数原型
|
1
|
dateFormat(Stringformat,[Numbertime],[Booleancapitalize])::String
|
2、说明
格式化JavaScript 时间（也就是一个时间数值，从1970年1月1日到现在的秒值）成为我们容易理解的常规的字符串型的时间格式（比如2012/10/23等）。这个格式化函数继承PHP格式化时间函数。
3、参数说明：
1）format: String
一个String型的格式字符串，包含如下形式
%a: 简短型星期,比如‘Mon’.
%A: 完整型星期, 比如‘Monday’.
%d: 两位的日期, 从01到31.
%e: 数字型日期,从 1 到 31.
%b: 简短型月份, 比如 ‘Jan’.
%B: 完整型月份, 比如 ‘January’.
%m: 两位的月份, 从01 到 12.
%y: 两位数的年份, 比如 09 代表 2009.
%Y: 四位数的年份, 比如 2009.
%H: 两位数的24小时制的时间, 从00 到 23.
%I: 两位输得12小时制的时间, 从 00 到 11.
%l (小写字母l):12小时制的时间, 1 到 11.
%M: 两位的分钟, 从00 到 59.
%p: 小写形式的 AM 或 PM.
%P: 大写形式的 AM or PM.
%S: 两位的秒, 从00 到 59
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="贺大爷" /> 6 <meta name="description" content="贺大爷" /> 7 <meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" /> 8 <meta content="yes" name="apple-mobile-web-app-capable" /> 9 <meta content="black" name="apple-mobile-web-app-status-bar-style" /> 10 <meta content="telephone=no" name="format-detection" /> 11 <title>highcharts图表</title> 12 <link href="/css/public_m.css" rel="stylesheet" /> 13 <link href="/css/index_m.css" rel="stylesheet" /> 14 <link href="/css/swiper.css" rel="stylesheet" /> 15 <script src="/js/jquery-1.11.1.min.js"></script> 16 <script src="/js/swiper.js"></script> 17 <script src="/js/highcharts.js"></script> 18 <script src="/js/data.js"></script> 19 <script src="/js/exporting.js"></script> 20 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js "></script> 21 <script src="/js/wx_js-sdk.js"></script> 22 <style> 23 html,body{position:relative;height:100%;} 24 .swiper-container{width:100%;height:100%;} 25 </style> 26 <script type="text/javascript"> 27 var contentModel = { 28 "title": document.title,//分享到朋友圈的标题 29 "link": "", 30 "imgUrl": "", 31 "f_title": document.title,//分享给朋友的标题 32 "f_desc": ''//分享给朋友的描述 33 }; 34 //wxBridgeReady.ready(); 35 wxHtmlBridgeReady.ready(); 36 37 //渲染图表 38 function highchartsFn(idx,charttype) { 39 var chart_tit = ""; 40 switch (idx) { 41 case 1: chart_tit = "中午肉夹馍销售总数"; break; 42 case 2: chart_tit = "中午纯瘦/肥瘦肉夹馍销售数据"; break; 43 case 3: chart_tit = "晚上肉夹馍销售总数"; break; 44 case 4: chart_tit = "晚上纯瘦/肥瘦肉夹馍销售数据"; break; 45 } 46 47 $('#container_' + idx).highcharts({ 48 data: { 49 table: 'highchart_' + idx 50 }, 51 chart: { 52 type: charttype 53 }, 54 title: { 55 text: chart_tit 56 }, 57 xAxis: { 58 type: 'category', 59 labels: { 60 rotation: -90//, 61 //formatter: function () { 62 // return Highcharts.dateFormat('%Y/%b/%e(%a)', this.value);//火狐浏览器不兼容(在火狐上，会导致x轴标签不显示) 63 //} 64 } 65 }, 66 yAxis: { 67 title: { 68 text: '' 69 } 70 }, 71 tooltip: { 72 xDateFormat: '%Y/%b/%e(%a)' 73 }, 74 plotOptions: { 75 series: { 76 marker: { 77 enabled: false 78 } 79 } 80 }, 81 credits: { 82 enabled: false 83 } 84 }); 85 } 86 $(function () { 87 //设置图表线颜色 88 Highcharts.setOptions({ 89 colors: ['#f16045', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], 90 lang: { 91 months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], 92 shortMonths: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'], 93 weekdays: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], 94 thousandsSep: ''// 去掉千位的逗号 95 } 96 }); 97 highchartsFn(1,"line"); 98 }); 99 </script> 100 </head> 101 <body> 102 <div id="content" class="swiper-container"> 103 <div class="swiper-wrapper"> 104 <div class="swiper-slide page_1"> 105 <div id="container_1" style="width:100%;height:100%;"></div> 106 <table id="highchart_1" style="display:none;"> 107 <thead><!--//thead指定数据列--> 108 <tr> 109 <th>支付日期</th> 110 <th>销售总数</th> 111 </tr> 112 </thead> 113 <tbody><!--//tbody指定数据--> 114 <tr> 115 <td>2016/3/26(六)</td> 116 <td>4</td> 117 </tr> 118 <tr> 119 <td>2016/3/27(日)</td> 120 <td>7</td> 121 </tr> 122 <tr> 123 <td>2016/3/28(一)</td> 124 <td>9</td> 125 </tr> 126 127 <tr> 128 <td>2016/3/29(二)</td> 129 <td>3</td> 130 </tr> 131 <tr> 132 <td>2016/3/30(三)</td> 133 <td>1</td> 134 </tr> 135 <tr> 136 <td>2016/3/31(四)</td> 137 <td>3</td> 138 </tr> 139 <tr> 140 <td>2016/4/1(五)</td> 141 <td>1</td> 142 </tr> 143 <tr> 144 <td>2016/4/3(日)</td> 145 <td>2</td> 146 </tr> 147 <tr> 148 <td>2016/4/4(一)</td> 149 <td>5</td> 150 </tr> 151 <tr> 152 <td>2016/4/6(三)</td> 153 <td>2</td> 154 </tr> 155 <tr> 156 <td>2016/4/7(四)</td> 157 <td>1</td> 158 </tr> 159 <tr> 160 <td>2016/4/8(五)</td> 161 <td>3</td> 162 </tr> 163 <tr> 164 <td>2016/4/9(六)</td> 165 <td>32</td> 166 </tr> 167 <tr> 168 <td>2016/4/10(日)</td> 169 <td>29</td> 170 </tr> 171 <tr> 172 <td>2016/4/11(一)</td> 173 <td>14</td> 174 </tr> 175 <tr> 176 <td>2016/4/12(二)</td> 177 <td>17</td> 178 </tr> 179 <tr> 180 <td>2016/4/13(三)</td> 181 <td>8</td> 182 </tr> 183 <tr> 184 <td>2016/4/14(四)</td> 185 <td>11</td> 186 </tr> 187 <tr> 188 <td>2016/4/15(五)</td> 189 <td>6</td> 190 </tr> 191 <tr> 192 <td>2016/4/16(六)</td> 193 <td>13</td> 194 </tr> 195 <tr> 196 <td>2016/4/17(日)</td> 197 <td>16</td> 198 </tr> 199 </tbody> 200 </table> 201 </div> 202 <div class="swiper-slide page_2"> 203 <div id="container_2" style="width:100%;height:100%;"></div> 204 <table id="highchart_2" style="display:none;"> 205 <thead><!--//thead指定数据列--> 206 <tr> 207 <th>支付日期</th> 208 <th>肉夹馍（纯瘦）</th> 209 <th>肉夹馍（肥瘦）</th> 210 </tr> 211 </thead> 212 <tbody><!--//tbody指定数据--> 213 <tr> 214 <td>2016/3/26(六)</td> 215 <td>0</td> 216 <td>4</td> 217 </tr> 218 <tr> 219 <td>2016/3/27(日)</td> 220 <td>0</td> 221 <td>7</td> 222 </tr> 223 <tr> 224 <td>2016/3/28(一)</td> 225 <td>3</td> 226 <td>6</td> 227 </tr> 228 <tr> 229 <td>2016/3/29(二)</td> 230 <td>0</td> 231 <td>3</td> 232 </tr> 233 <tr> 234 <td>2016/3/30(三)</td> 235 <td>1</td> 236 <td>0</td> 237 </tr> 238 <tr> 239 <td>2016/3/31(四)</td> 240 <td>0</td> 241 <td>3</td> 242 </tr> 243 <tr> 244 <td>2016/4/1(五)</td> 245 <td>0</td> 246 <td>1</td> 247 </tr> 248 <tr> 249 <td>2016/4/3(日)</td> 250 <td>2</td> 251 <td>0</td> 252 </tr> 253 <tr> 254 <td>2016/4/4(一)</td> 255 <td>3</td> 256 <td>2</td> 257 </tr> 258 <tr> 259 <td>2016/4/6(三)</td> 260 <td>0</td> 261 <td>2</td> 262 </tr> 263 <tr> 264 <td>2016/4/7(四)</td> 265 <td>0</td> 266 <td>1</td> 267 </tr> 268 <tr> 269 <td>2016/4/8(五)</td> 270 <td>1</td> 271 <td>2</td> 272 </tr> 273 <tr> 274 <td>2016/4/9(六)</td> 275 <td>9</td> 276 <td>23</td> 277 </tr> 278 <tr> 279 <td>2016/4/10(日)</td> 280 <td>12</td> 281 <td>17</td> 282 </tr> 283 <tr> 284 <td>2016/4/11(一)</td> 285 <td>5</td> 286 <td>9</td> 287 </tr> 288 <tr> 289 <td>2016/4/12(二)</td> 290 <td>11</td> 291 <td>6</td> 292 </tr> 293 <tr> 294 <td>2016/4/13(三)</td> 295 <td>0</td> 296 <td>8</td> 297 </tr> 298 <tr> 299 <td>2016/4/14(四)</td> 300 <td>6</td> 301 <td>5</td> 302 </tr> 303 <tr> 304 <td>2016/4/15(五)</td> 305 <td>2</td> 306 <td>4</td> 307 </tr> 308 <tr> 309 <td>2016/4/16(六)</td> 310 <td>7</td> 311 <td>6</td> 312 </tr> 313 <tr> 314 <td>2016/4/17(日)</td> 315 <td>9</td> 316 <td>7</td> 317 </tr> 318 </tbody> 319 </table> 320 </div> 321 <div class="swiper-slide page_3"> 322 <div id="container_3" style="width:100%;height:100%;"></div> 323 <table id="highchart_3" style="display:none;"> 324 <thead><!--//thead指定数据列--> 325 <tr> 326 <th>支付日期</th> 327 <th>销售总数</th> 328 </tr> 329 </thead> 330 <tbody><!--//tbody指定数据--> 331 <tr> 332 <td>2016/3/25(五)</td> 333 <td>4</td> 334 </tr> 335 <tr> 336 <td>2016/3/26(六)</td> 337 <td>9</td> 338 </tr> 339 <tr> 340 <td>2016/3/27(日)</td> 341 <td>9</td> 342 </tr> 343 344 <tr> 345 <td>2016/3/28(一)</td> 346 <td>7</td> 347 </tr> 348 <tr> 349 <td>2016/3/29(二)</td> 350 <td>2</td> 351 </tr> 352 <tr> 353 <td>2016/3/30(三)</td> 354 <td>1</td> 355 </tr> 356 <tr> 357 <td>2016/3/31(四)</td> 358 <td>4</td> 359 </tr> 360 <tr> 361 <td>2016/4/1(五)</td> 362 <td>8</td> 363 </tr> 364 <tr> 365 <td>2016/4/2(六)</td> 366 <td>4</td> 367 </tr> 368 <tr> 369 <td>2016/4/3(日)</td> 370 <td>5</td> 371 </tr> 372 <tr> 373 <td>2016/4/4(一)</td> 374 <td>7</td> 375 </tr> 376 <tr> 377 <td>2016/4/5(二)</td> 378 <td>4</td> 379 </tr> 380 <tr> 381 <td>2016/4/6(三)</td> 382 <td>9</td> 383 </tr> 384 <tr> 385 <td>2016/4/7(四)</td> 386 <td>12</td> 387 </tr> 388 <tr> 389 <td>2016/4/8(五)</td> 390 <td>48</td> 391 </tr> 392 <tr> 393 <td>2016/4/9(六)</td> 394 <td>51</td> 395 </tr> 396 <tr> 397 <td>2016/4/10(日)</td> 398 <td>65</td> 399 </tr> 400 <tr> 401 <td>2016/4/11(一)</td> 402 <td>25</td> 403 </tr> 404 <tr> 405 <td>2016/4/12(二)</td> 406 <td>41</td> 407 </tr> 408 <tr> 409 <td>2016/4/13(三)</td> 410 <td>22</td> 411 </tr> 412 <tr> 413 <td>2016/4/14(四)</td> 414 <td>22</td> 415 </tr> 416 <tr> 417 <td>2016/4/15(五)</td> 418 <td>46</td> 419 </tr> 420 <tr> 421 <td>2016/4/16(六)</td> 422 <td>35</td> 423 </tr> 424 <tr> 425 <td>2016/4/17(日)</td> 426 <td>38</td> 427 </tr> 428 </tbody> 429 </table> 430 </div> 431 <div class="swiper-slide page_4"> 432 <div id="container_4" style="width:100%;height:100%;"></div> 433 <table id="highchart_4" style="display:none;"> 434 <thead><!--//thead指定数据列--> 435 <tr> 436 <th>支付日期</th> 437 <th>肉夹馍（纯瘦）</th> 438 <th>肉夹馍（肥瘦）</th> 439 </tr> 440 </thead> 441 <tbody><!--//tbody指定数据--> 442 <tr> 443 <td>2016/3/25(五)</td> 444 <td>0</td> 445 <td>4</td> 446 </tr> 447 <tr> 448 <td>2016/3/26(六)</td> 449 <td>0</td> 450 <td>9</td> 451 </tr> 452 <tr> 453 <td>2016/3/27(日)</td> 454 <td>0</td> 455 <td>9</td> 456 </tr> 457 <tr> 458 <td>2016/3/28(一)</td> 459 <td>4</td> 460 <td>3</td> 461 </tr> 462 <tr> 463 <td>2016/3/29(二)</td> 464 <td>0</td> 465 <td>2</td> 466 </tr> 467 <tr> 468 <td>2016/3/30(三)</td> 469 <td>0</td> 470 <td>1</td> 471 </tr> 472 <tr> 473 <td>2016/3/31(四)</td> 474 <td>3</td> 475 <td>1</td> 476 </tr> 477 <tr> 478 <td>2016/4/1(五)</td> 479 <td>0</td> 480 <td>8</td> 481 </tr> 482 <tr> 483 <td>2016/4/2(六)</td> 484 <td>0</td> 485 <td>4</td> 486 </tr> 487 <tr> 488 <td>2016/4/3(日)</td> 489 <td>1</td> 490 <td>4</td> 491 </tr> 492 <tr> 493 <td>2016/4/4(一)</td> 494 <td>2</td> 495 <td>5</td> 496 </tr> 497 <tr> 498 <td>2016/4/5(二)</td> 499 <td>0</td> 500 <td>4</td> 501 </tr> 502 <tr> 503 <td>2016/4/6(三)</td> 504 <td>1</td> 505 <td>8</td> 506 </tr> 507 <tr> 508 <td>2016/4/7(四)</td> 509 <td>3</td> 510 <td>9</td> 511 </tr> 512 <tr> 513 <td>2016/4/8(五)</td> 514 <td>16</td> 515 <td>32</td> 516 </tr> 517 <tr> 518 <td>2016/4/9(六)</td> 519 <td>17</td> 520 <td>34</td> 521 </tr> 522 <tr> 523 <td>2016/4/10(日)</td> 524 <td>6</td> 525 <td>59</td> 526 </tr> 527 <tr> 528 <td>2016/4/11(一)</td> 529 <td>10</td> 530 <td>15</td> 531 </tr> 532 <tr> 533 <td>2016/4/12(二)</td> 534 <td>13</td> 535 <td>28</td> 536 </tr> 537 <tr> 538 <td>2016/4/13(三)</td> 539 <td>7</td> 540 <td>15</td> 541 </tr> 542 <tr> 543 <td>2016/4/14(四)</td> 544 <td>0</td> 545 <td>22</td> 546 </tr> 547 <tr> 548 <td>2016/4/15(五)</td> 549 <td>17</td> 550 <td>29</td> 551 </tr> 552 <tr> 553 <td>2016/4/16(六)</td> 554 <td>6</td> 555 <td>29</td> 556 </tr> 557 <tr> 558 <td>2016/4/17(日)</td> 559 <td>9</td> 560 <td>29</td> 561 </tr> 562 </tbody> 563 </table> 564 </div> 565 </div> 566 <div class="swiper-pagination"></div> 567 </div> 568 <!--整屏滑动--> 569 <script type="text/javascript"> 570 var swiper = new Swiper('.swiper-container', { 571 pagination: '.swiper-pagination', 572 paginationClickable: true, 573 direction: 'vertical', 574 onSlideChangeStart: function (swiper) { 575 var idx = swiper.activeIndex; 576 var i = idx + 1; 577 //重新渲染图表 578 highchartsFn(i, "line"); 579 } 580 }); 581 </script> 582 <!--整屏滑动--> 583 </body> 584 </html>
