TShopping

 找回密碼
 註冊
搜索
查看: 783|回復: 0

[分享] JQuery圖表插件——Highcharts

  [複製鏈接]
發表於 2016-4-29 00:02:43 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 
因為項目中需要用到圖表生成,所有Google了下,找到了這個插件,順帶寫了個DEMO。點擊跳轉官網

先上三個圖,分別是曲線、柱狀、扇形。

1.png 2.png
3.png





圖表中的數據純屬於DEMO的測試數據,沒有實際用意。下面講下大致的實現步驟

4.png

第一步,下載並且引用JS包(highcharts.js),theme顧名思義是放模板的。
可以下載DEMO逐一試試就知道效果怎麼樣了,上圖就應用了兩個樣式。download中放的是打印和導出成圖片的js文件(貌似是通過js上傳到官網,然後再下載到本地),因為項目是放到內網的所以就沒有用了。

第二步,實現,貼代碼。
  1. var chart;
  2.          $(document).ready( function () {
  3.              chart = new Highcharts.Chart({
  4.                  chart: {
  5.                      renderTo: 'container',           // 放置圖表的容器
  6.                      plotBackgroundColor: null ,
  7.                      plotBorderWidth: null ,
  8.                      defaultSeriesType: 'line'   
  9.                  },
  10.                  title: {
  11.                      text: 'JQuery曲線圖演示'
  12.                  },
  13.                  subtitle: {
  14.                      text: '副標題'
  15.                  },
  16.                  xAxis: { // X軸數據
  17.                      categories: ['一月份', '二月份', '三月份', '四月份', '五月份', '六月份', '七月份', '八月份', '九月份', '十月份', '十一月份', '十二月份' ],
  18.                      labels: {
  19.                          rotation: -45, // 字體傾斜
  20.                          align: 'right' ,
  21.                          style: { font: 'normal 13px宋體' }
  22.                      }
  23.                  },
  24.                  yAxis: { // Y軸顯示文字
  25.                      title: {
  26.                          text: '產量/百萬'
  27.                      }
  28.                  },
  29.                  tooltip: {
  30.                      enabled: true ,
  31.                      formatter: function () {
  32.                          return '<b>' + this .x + '</b><br/>' + this .series.name + ': ' + Highcharts.numberFormat( this .y, 1 );
  33.                      }
  34.                  },
  35.                  plotOptions: {
  36.                      line: {
  37.                          dataLabels: {
  38.                              enabled: true
  39.                          },
  40.                          enableMouseTracking: true // 是否顯示title
  41.                      }
  42.                  },
  43.                  series: [{
  44.                      name: '杭州' ,
  45.                      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 ]
  46.                  }, {
  47.                      name: '江西' ,
  48.                      data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5 , 23.3, 38.3, 23.9, 3.6 ]
  49.                  }, {
  50.                      name: '北京' ,
  51.                      data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6 ]
  52.                  } , {
  53.                      name: '湖南' ,
  54.                      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 ]
  55. }]
  56.                  });
  57.              });
複製代碼


這寫都是配置,最重要的就是series裡面的數據了,如果需要從數據庫中取出來的話,直接生成json然後賦值上去就OK了,效果很炫,還有動態感,感興趣的朋友可以下載下來跑跑。

注意,DEMO裡的download文件夾中的js文件,本來導出及打印的一些提示是英文,我已經修改成中文了,在引用js文件的時候需要charset="gb2312",具體DEMO中我已經寫好了註釋。好的,到此為止。下載地址


 

臉書網友討論

Highcharts.rar

76.7 KB, 下載次數: 0

售價: 5 金T幣  [記錄]  [購買]

JQuery圖表插件——Highcharts

您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



Archiver|手機版|小黑屋|免責聲明|TShopping

GMT+8, 2016-12-5 18:30 , Processed in 0.060121 second(s), 26 queries .

本論壇言論純屬發表者個人意見,與 TShopping綜合論壇 立場無關 如有意見侵犯了您的權益 請寫信聯絡我們。

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回復 返回頂部 返回列表