IT技ji)躉?dong)交流(liu)平台

易博APP官网

作者︰Chandler Qian  發布日期(qi)︰2020-02-18 11:05:45

 Highcharts是一款純javascript編寫(xie)的圖表庫,能夠很簡(jian)單(dan)便捷的在Web網站或Web應用中添加交互性的圖表,Highcharts目前支持直bi)咄肌?咄肌 婊ji)圖、柱狀圖、餅圖、散點(dian)圖等多達18種不同類型的圖表,可(ke)以yue)隳ni)對Web圖表的任何需求 !

   以上是Highcharts中xing)耐系募jian)介(jie)!

  如果論語法的簡(jian)單(dan)性,或者需要畫功能簡(jian)單(dan)的折線、柱狀以及(ji)餅狀圖,Highcharts是遠遠不如js圖標庫——js charts 的mo)  僑綣婕ji)到(dao)復雜多樣的功能特性,Highcharts甩了js charts何止8條街!

  這類的Js框架通常很容易學習。下載了包後(hou),看例(li)子就可(ke)以了,不過Highcharts在這點(dian)上做(zuo)的是非常好! 

  見︰

  Highcharts中xing)耐滓常ttp://www.hcharts.cn/index.php

  Highcharts官網︰http://www.highcharts.com/

  學習highcharts無需按照(zhao)包下的examples例(li)子一個個去試(我學js charts就是這麼做(zuo)的 !- -),

  通過中xing)耐 ┐惱個頁面,一個小時你(ni)就可(ke)以初(chu)步(bu)掌握zhao)庀羆際(ji) /p>

    Highcharts中xing)慕壇cheng)

  Highcharts API文(wen)檔

  Highcharts 在線演(yan)示平台

    學習的重(zhong)點(dian)就是這個在線演(yan)示平台啦,它(ta)包含(han)了下載包中的所(suo)有示例(li)文(wen)件(jian)。而且可(ke)以點(dian)擊qqqpqaGvq7CF4JIVVVVRoxLRQKxq8N1A9Q/Grc/uskWpDDdHR02H2dBH1vTD6f39/f/yeiw/7+fj6ft/9yHjxkHpund+hVZ8VisVAo5BEdCoVCsVi0/6ozPGQem6eHL478D4AvjvwxaLw4EkF+ymBMEQeAMUUcAMYUcQAYU8QBYEwRB4AxRRwAxhRxABhTxAFgTBEHgDFFHMC/AMmPjQU9vQpUAAAAAElFTkSuQmCC" />頁面中間的這個“編輯代碼(ma)”可(ke)以跳轉到(dao)一個“在線測試平台”的地方(fang),像這里http://www.hcharts.cn/test/index.php?from=demo&p=10

   在線演(yan)示平台做(zuo)的也非常詳細(xi),不過很多版(ban)塊(kuai)還在完(wan)善中。。。

  highcharts學習的入口(kou)是什麼呢,就是官網的這個圖啦(這里從官網拿下來)︰

  這里是一個圖表的所(suo)有屬性。一目了然。

這里是官網上的一個簡(jian)單(dan)的圖表示例(li)︰

這個示例(li)是由下面的代碼(ma)直接生成的。我簡(jian)單(dan)注釋了一下。代碼(ma)位于(yu)Highlchar-4.0.3下,Highcharts-4.0.3examplesline-labelsindex.html,直接打(da)開即(ji)可(ke)。

<!DOCTYPE HTML><html> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <title>Highcharts Example</title> <!--值得注意的是,Highcharts運(yun)行需要兩個js文(wen)件(jian),Highcharts.js及(ji)jQuery、MooTools 、Prototype 、Highcharts Standalone Framework 中的一個框架文(wen)件(jian)。(抄自官網...)--> <script type='text/javascript' src='http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js'></script> <style type='text/css'>${demo.css} </style> <script type='text/javascript'>$(function () { $('#container').highcharts({  chart: { //圖表總體的設置(zhi)  type: 'line' //這個默認為line即(ji)折線圖,還可(ke)以為柱狀column,不過餅狀圖不是這里設置(zhi),而是直接在series數據(ju)列(lie)上xian)付type: 'pie',  },  title: { //圖表標題  text: 'Monthly Average Temperature' //標題名稱(chen)  },  subtitle: { //副標題  text: 'Source: WorldClimate.com'  },  xAxis: { //x軸(zhou)  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] //x軸(zhou)數據(ju)  },  yAxis: { //Y軸(zhou)  title: {   text: 'Temperature (?C)' //y軸(zhou)標題  }  },  plotOptions: {   //圖表標示的各種選項  line: {   //這里由于(yu)是折線圖,那(na)麼就是折線圖的選項   dataLabels: {  //數據(ju)標簽   enabled: true //允許顯(xian)示數據(ju),默認為false,不顯(xian)示具體數據(ju)   },   enableMouseTracking: false //這個讓鼠標放到(dao)數據(ju)點(dian)的時候(hou),不動(dong)態顯(xian)示一個小圓(yuan)圈,默認為true  }  },  series: [{ //這里省略了一個data數組的標示,更為方(fang)便,實際(ji)上下面的name和(he)data都ji)鞘粲yu)data數組元素(su)的屬性,下面2組數據(ju),就代表2組數據(ju)並(bing)列(lie)  name: 'Tokyo', //數據(ju)名  data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] //具體數據(ju)  }, {  name: 'London',  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]  }] }); }); </script> </head> <body><script src='../../js/highcharts.js'></script><script src='../../js/modules/exporting.js'></script><div id='container' style='min-width: 310px; height: 400px; margin: 0 auto'></div> </body></html>

  highcharts是一個簡(jian)單(dan)的js圖表框架,不建議(yi)仔(zi)細(xi)閱讀API文(wen)檔,建議(yi)根據(ju)示例(li)和(he)實際(ji)需求,一邊添加功能,一邊快速學習。

  PS : 經斯克迪亞提醒,才發現(xian),這個highchars中xing)耐gen)bootstrap中xing)耐淨yu)同樣的主(zhu)頁樣式,是一個今年剛畢(bi)業(ye)的學生創辦(ban)的mo) 翟諛昵嵊形(xing) 「gen)highcharts官方(fang)(http://www.highcharts.com)的關系其實不大。不過作為非營利性的網站,是很不錯了!bootstrap中xing)耐涫狄哺gen)這個類似。個人猜測,這些中xing)耐ke)能跟(gen)國外官網的關系都不大,只(zhi)是國內熱心的技ji)躒嗽蔽 思際(ji)踅渙liu)而自行xie)戳 模(mo) 灸諶蓴臼竊從yu)官網的。

出(chu)處︰http://www.cnblogs.com/zrtqsk/p/4013980.html 謝謝!

Tag標簽︰圖表  網頁  
  • 易博APP官网

About IT165 - 159彩票官网廣告(gao)服務 - 隱(yin)私(si)聲明(ming) - 版(ban)權申明(ming) - 免責條款 - 網站地圖 - 易博平台官网網友(you)投稿 - 聯系方(fang)式
本站內容來自于(yu)互聯網,僅供用于(yu)網絡技ji)躚 學習中請遵循相(xiang)關法律(lv)法規
易博APP官网 | 下一页