close

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

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

可以看出，要想在一個圖表中（柱狀圖）到場多種圖表情勢（曲線圖、餅狀圖等），環節在於設置選項：series（數據列）中的type屬性，從上述代碼中可以看出，設置column、spline、pie類型示意分歧的圖表，而在設置餅狀圖（pie）中，需要設置餅狀圖的坐標和巨細，調劑位置，如許可使得全部圖表顯得加倍協調。

以下是某生果批發商提供的數據表格，表格數據顯示三城市四種生果發賣量（萬噸）環境。

 

<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實現柱狀圖、餅狀圖、曲線圖三圖合一

 

接下來，完成javascript挪用highcharts，請看代碼和註釋：

關於highcharts圖表類的申明請查看本站helloweba.com前面的文章介紹：Highcharts-功能壯大的圖表庫的利用，本文假定您已經對highcharts有所領會，插足您對highcharts還全無所聞，請移步本站前面的相關文章領會。

利用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. });
複製代碼

首先，我們在combo.html中引入jquery庫和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
網站架設
arrow
arrow
    文章標籤
    網站架設
    全站熱搜
    創作者介紹
    創作者 juliox56aaj 的頭像
    juliox56aaj

    新竹網站架設

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