本文以某大型水果批商一年生果售表例，利用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 //不显示饼状图数据标签
- }
- }]
- });
- });
代 <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一不通，移步本站前面的相文章了解。
以下是某水果批商供的表格，表格示三城市四水果量（）情形。
在和剖析中，有碰到客需要在一表中柱、、曲的都出，即可以柱中看出具、又能曲中看出向，能中看出各部分比重。Highcharts可以三合一的果。
可以看出，要想在一表中（柱）插足多表情（曲、等），要害在於置：series（列）中的type性，上述代中可以看出，置column、spline、pie型透露表分歧的表，而在置（pie）中，需要置的坐以及巨，整位置，可使得整表得加倍和。
起首，我在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 |
接下，完成Javascript用highcharts，看代和：
文章定位：
