close

使用Highcharts實現柱狀圖、餅狀圖、曲線圖三圖合一

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

使用Highcharts實現柱狀圖、餅狀圖、曲線圖三圖合一

 

 

本文以某大型生果批發商一年生果銷售報表為例，利用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）中，需要設置餅狀圖的坐標和巨細，調劑位置，如許可使得全部圖表顯得加倍和諧。

 



引用自:
arrow
arrow
    文章標籤
    網頁設計
    全站熱搜
    創作者介紹
    創作者 thatcheulruaj 的頭像
    thatcheulruaj

    新竹網頁設計

    thatcheulruaj 發表在 痞客邦 留言(0) 人氣()