以下是某水果批發商提供的數據表格，表格數據顯示三城市四種水果發賣量（萬噸）情形。
關於highcharts圖表類的申明請查看本站helloweba.com前面的文章介紹：Highcharts-功能壯大的圖表庫的運用，本文假設您已對highcharts有所領會，到場您對highcharts還全無所聞，請移步本站前面的相幹文章認識。
起首，我們在combo.html中引入jquery庫和highcharts圖表類：
接下來，完成javascript挪用highcharts，請看代碼和註釋：
本文以某大型生果批發商一年水果銷售報表為例，利用Highcharts將傳統表格中的數據，表現在圖表中，集中展現生果銷售情形，為商家提供直觀的數據分析。
- var chart;
- $(function() {
- chart = new Highcharts.Chart({
- chart: {
- renderTo: 'chart_combo' //关联页面元素div#id
- },
- title: { //图表标题
- text: '2011年东北三大城市水果消费量统计图'
- },
- xAxis: { //x轴
- categories: ['柑桔', '香蕉','苹果', '梨子'], //X轴类别
- labels:{y:18} //x轴标签位置：距X轴下方18像素網站架設
- },
- yAxis: { //y轴
- title: {text: '消费量（万吨）'}, //y轴标题
- lineWidth: 2 //基线宽度
- },
- tooltip: {
- formatter: function() { //格式化鼠标滑向图表数据点时显示的提醒框
- var s;
- if (this.point.name) { // 饼状图
- s = '<b>' + this.point.name + '</b>: <br>' + this.y+ '万吨(' +
- twoDecimal(this.percentage) + '%)';
- } else {
- s = '' + this.x + ': ' + this.y + '万吨';
- }
- return s;
- }
- },
- labels: { //图表标签
- items: [{
- html: '生果消费总量对比',
- style: {
- left: '48px',
- top: '8px'
- }
- }]
- },
- exporting: {
- enabled: false //设置导出按钮不行用
- },
- credits: {
- text: 'helloweba.com',
- href: 'http://www.helloweba.com'
- },
- series: [{ //数据列
- type: 'column',
- name: '长春',
- data: [8.4, 9.8, 11.4, 15.6]
- },
- {
- type: 'column',
- name: '沈阳',
- data: [9.2, 7.8, 10.2, 16.8]
- },
- {
- type: 'column',
- name: '哈尔滨',
- data: [6.5, 9.4, 13.2, 18.6]
- },
- {
- type: 'spline',
- name: '平均值',
- data: [8.03, 9, 11.6, 17]
- },
- {
- type: 'pie', //饼状图
- name: '生果消费总量',
- data: [{
- name: '长春',
- y: 45.2,
- color: '#4572A7' 網站架設
- },
- {
- name: '沈阳',
- y: 44,
- color: '#AA4643'
- },
- {
- name: '哈尔滨',
- y: 47.7,
- color: '#89A54E'
- }],
- center: [100, 80], //饼状图坐标
- size: 100, //饼状图直径大小
- dataLabels: {
- enabled: false //不显示饼状图数据标签
- }
- }]
- });
- });
複製代碼
| |
長春 |
瀋陽
|
哈爾濱
|
|
柑橘
|
8.4
|
9.2
|
6.5
|
|
香蕉
|
9.8
|
7.8
|
9.4
|
|
蘋果
|
11.4
|
|
13.2
|
|
梨子
|
15.6
|
16.8
|
18.6
|
在數據統計和闡明業務中，有時會碰到客戶需要在一個圖表中將柱狀圖、餅狀圖、曲線圖的都體現出來，即可以從柱狀圖中看出具體數據、又能從曲線圖中看出變化趨勢，還能從餅狀圖中看出各部門數據比重。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>
可以看出，要想在一個圖表中（柱狀圖）加入多種圖表情勢（曲線圖、餅狀圖等），關鍵在於設置選項：series（數據列）中的type屬性，從上述代碼中可以看出，設置column、spline、pie類型表示分歧的圖表，而在設置餅狀圖（pie）中，需要設置餅狀圖的坐標以及巨細，調劑位置，如許可使得全部圖表顯得加倍和諧。
本文引用自:
文章定位：
