TShopping

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

[教學] 使用Highcharts實現柱狀圖、餅狀圖、曲線圖三圖合一

[複製鏈接]
發表於 2016-4-29 16:37:35 | 顯示全部樓層 |閱讀模式
 
Push to Facebook Push to Plurk Push to Twitter 

在數據統計和分析業務中,有時會遇到客戶需要在一個圖表中將柱狀圖、餅狀圖、曲線圖的都體現出來,即可以從柱狀圖中看出具體數據、又能從曲線圖中看出變化趨勢,還能從餅狀圖中看出各部分數據比重。Highcharts可以輕鬆實現三圖合一的效果。

chart_combo.gif


本文以某大型水果批發商一年水果銷售報表為例,使用Highcharts將傳統表格中的數據,體現在圖表中,集中展示水果銷售情況,為商家提供直觀的數據分析。

以下是某水果批發商提供的數據表格,表格數據顯示三城市四種水果銷售量(萬噸)情況。


長春
瀋陽
哈爾濱
柑橘
8.4
9.2
6.5
香蕉
9.8
7.8
9.4
蘋果
11.4
10.2
13.2
梨子
15.6
16.8
18.6

首先,我們在combo.html中引入jquery庫和highcharts圖表類:

<script type = "text/javascript" src = "jquery.js" > </script>
<script type = "text/javascript" src = "highcharts.js" > </script>
<script type = "text/javascript" src = "exporting.js" > </script>

關於highcharts圖表類的說明請查看本站helloweba.com前面的文章介紹:Highcharts-功能強大的圖表庫的應用,本文假設您已經對highcharts有所了解,加入您對highcharts還一無所知,請移步本站前面的相關文章了解。

接下來,完成javascript調用highcharts,請看代碼和註釋:

  1. var chart;
  2. $(function() {
  3.     chart = new Highcharts.Chart({
  4.         chart: {
  5.             renderTo: 'chart_combo' //关联页面元素div#id
  6.         },
  7.         title: {  //图表标题
  8.             text: '2011年东北三大城市水果消费量统计图'
  9.         },
  10.         xAxis: { //x轴
  11.             categories: ['柑橘', '香蕉','苹果', '梨子'],  //X轴类别
  12.             labels:{y:18}  //x轴标签位置:距X轴下方18像素
  13.         },
  14.         yAxis: {  //y轴
  15.             title: {text: '消费量(万吨)'}, //y轴标题
  16.             lineWidth: 2 //基线宽度
  17.         },
  18.         tooltip: {
  19.             formatter: function() { //格式化鼠标滑向图表数据点时显示的提示框
  20.                 var s;
  21.                 if (this.point.name) { // 饼状图
  22.                     s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' +  
  23. twoDecimal(this.percentage) + '%)';
  24.                 } else {
  25.                     s = '' + this.x + ': ' + this.y + '万吨';
  26.                 }
  27.                 return s;
  28.             }
  29.         },
  30.         labels: { //图表标签
  31.             items: [{
  32.                 html: '水果消费总量对比',
  33.                 style: {
  34.                     left: '48px',
  35.                     top: '8px'
  36.                 }
  37.             }]
  38.         },
  39.         exporting: {
  40.             enabled: false  //设置导出按钮不可用
  41.         },
  42.         credits: {  
  43.             text: 'helloweba.com',
  44.             href: 'http://www.helloweba.com'
  45.         },
  46.         series: [{ //数据列
  47.             type: 'column',
  48.             name: '长春',
  49.             data: [8.4, 9.8, 11.4, 15.6]
  50.         },
  51.         {
  52.             type: 'column',
  53.             name: '沈阳',
  54.             data: [9.2, 7.8, 10.2, 16.8]
  55.         },
  56.         {
  57.             type: 'column',
  58.             name: '哈尔滨',
  59.             data: [6.5, 9.4, 13.2, 18.6]
  60.         },
  61.         {
  62.             type: 'spline',
  63.             name: '平均值',
  64.             data: [8.03, 9, 11.6, 17]
  65.         },
  66.         {
  67.             type: 'pie', //饼状图
  68.             name: '水果消费总量',
  69.             data: [{
  70.                 name: '长春',
  71.                 y: 45.2,
  72.                 color: '#4572A7'  
  73.             },
  74.             {
  75.                 name: '沈阳',
  76.                 y: 44,
  77.                 color: '#AA4643'  
  78.             },
  79.             {
  80.                 name: '哈尔滨',
  81.                 y: 47.7,
  82.                 color: '#89A54E'  
  83.             }],
  84.             center: [100, 80],  //饼状图坐标
  85.             size: 100,  //饼状图直径大小
  86.             dataLabels: {
  87.                 enabled: false  //不显示饼状图数据标签
  88.             }
  89.         }]
  90.     });
  91. });
複製代碼

可以看出,要想在一個圖表中(柱狀圖)加入多種圖表形式(曲線圖、餅狀圖等),關鍵在於設置選項:series(數據列)中的type屬性,從上述代碼中可以看出,設置column、spline、pie類型表示不同的圖表,而在設置餅狀圖(pie)中,需要設置餅狀圖的坐標以及大小,調整位置,這樣可以使得整個圖表顯得更加和諧。




 

臉書網友討論
您需要登錄後才可以回帖 登錄 | 註冊 |

本版積分規則



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

GMT+8, 2016-12-5 18:37 , Processed in 0.062773 second(s), 25 queries .

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

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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