highCharts图表应用-实现多种图表的显示

在数据统计和分析业务中，有时需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。highCharts可以轻松实现三图合一的效果。

        还是以刚才降雨量为例，如果没有highCharts基础，请先参考“highCharts如何使用-强大的图表库插件”。和上个例子相比，修改的地方只有js，所以着重点在js代码上面。这个例子主要是实现柱状图、折线图和饼图结合在一起的用法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118

$(function() { new Highcharts.Chart({ chart : { renderTo : 'gridTable', // 放置图表的DIV容器对应页面的id属性 }, title : { text : '全国各大城市降雨量综合统计图' // 图表标题 }, subtitle : { text : '2012年度' // 副标题 }, // x轴 xAxis : { categories : [ '第一季度', '第二季度', '第三季度', '第四季度', ] }, // 右下角显示的LOGO credits : { text : 'demo', // 设置LOGO区文字 href : 'http://www.javakfz.com' // 设置LOGO链接地址 }, // 是否启用导出功能，默认为true exporting : { enabled : true }, // y轴 yAxis : { min : 0, title : { text : '降雨量 (L)' } }, legend : { layout : 'vertical', backgroundColor : '#FFFFFF', align : 'left', verticalAlign : 'top', x : 100, y : 70, floating : true, shadow : true }, // 当鼠标悬置数据点时的格式化提示 tooltip : { formatter : function() { var temp; if (this.point.name) { // 饼状图 temp = '<b>' + this.point.name + '</b>: <br>(' + this.y + '%)'; } else { temp = '' + this.x + ': ' + this.y + 'L'; } return temp; } }, plotOptions : { column : { dataLabels : { enabled : true }, pointPadding : 0.2, borderWidth : 0 } }, // 图表标签 labels : { items : [ { html : '年度降雨量分布比例', style : { left : '228px', top : '8px' } } ] }, // 显示的数据,JSON数据格式，最重要的是name和data元素 series : [ { type : 'column', name : '成都', data : [ 1000, 600, 3000, 900 ] }, { type : 'column', name : '深圳', data : [ 2000, 1200, 5500, 1000 ] }, { type : 'column', name : '上海', data : [ 1500, 1400, 4000, 1200 ] }, { type : 'spline', name : '平均值', data : [ 1500, 1066.67, 4166.67, 1033.33 ] }, { // 饼图 type : 'pie', name : '年度降雨量分布', data : [ { name : '第一季度', y : 19.31 }, { name : '第二季度', y : 13.73, }, { name : '第三季度', y : 53.65, }, { name : '第四季度', y : 13.31, } ], // 饼状图坐标 center : [ 260, 60 ], // 饼状图直径大小 size : 100, dataLabels : { // 不显示饼状图数据标签 enabled : false } }] }); });

现在的效果就不像刚才的那么单调了。三种图标结合在一起分析数据还是比较直观。效果图：

        从上面的例子可以看出，要想在一个图表中（柱状图）加入多种图表形式（曲线图、饼状图等），关键在于设置选项：series（数据列）中的type属性，从上述代码中可以看出，设置column、spline、pie类型表示不同的图表，而在设置饼状图（pie）中，需要设置饼状图的坐标以及大小，调整位置，这样可以使得整个图表显得更加美观。

原创文章，转载请注明： 转载自java开发者

本文链接地址: highCharts图表应用-实现多种图表的显示