HCharts 柱状图和饼图

几个月前用HCharts写了这个柱状图和饼图，现在记录一下，方便以后再次使用。
效果图：

如何生成柱状图？
首先引入hcharts的js文件和css文件。

  <script src="../../../js/Highcharts-4.0.3/js/highcharts.js">script><script src="../../../js/Highcharts-4.0.3/js/modules/exporting.js">script>

方法：

        //创建饼图function CreatePie(itemdata) {$('#container').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: '' + jgname + '的人员统计分析'},tooltip: {pointFormat: '{series.name}: {point.percentage:.1f}%'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,color: '#000000',connectorColor: '#000000',format: '{point.name}: {point.percentage:.1f} %'}}},series: [{type: 'pie',name: '人员统计分析',data: itemdata}]});}//创建柱状图function CreateZhu(category, numFemale, numMale) {$('#container').highcharts({chart: {type: 'column'},title: {text: '' + jgname + '的人员统计分析'},xAxis: {categories: category},yAxis: {min: 0,title: {text: '数量 (人)'},stackLabels: {enabled: true,style: {fontWeight: 'bold',color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'}}},legend: {align: 'right',x: -70,verticalAlign: 'top',y: 20,floating: true,backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',borderColor: '#ccc',borderWidth: 1,shadow: false},tooltip: {formatter: function () {return '' + this.x + '
' +this.series.name + ': ' + this.y + ' 人
' +'总人数: ' + this.point.stackTotal + ' 人';}},plotOptions: {column: {stacking: 'normal',dataLabels: {enabled: true,color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',size: 30}}},series: [{name: '女',color: Highcharts.getOptions().colors[5],data: numFemale,}, {name: '男',color: '#007EAE',data: numMale}]}, function (chart) {});}

但是：html咋显示阿？

            <div data-options="region:'center',iconCls:'icon-ok'" id="img" style="overflow: auto;"><div id="container" style="width: 100%; height: 500px; margin: 0 auto">div>div>

看那么多代码，具体传入的数据格式是个啥？

 //统计图类型选择function select1(o, f) {//o 1为按单位 2为按年龄段；f 1为按柱状图，2为按饼图var url = "";//参数值选择url += '&o=' + o;url += '&f=' + type;url += '&j=' + $("#JGID").val();if (o == 1) {var unit = $("#JGNAME1").val();url += '&unit=' + unit;}else {var unit = $("#JGNAME2").val();url += '&unit=' + unit;}var itemdata = [];var numFemale = new Array();var numMale = new Array();if (o == 1) {flag = 1;if (type == 1) {//柱状图$.get("ashx/count.ashx?r=" + Math.random() + url,function (data) {var d = eval(data);for (var i = 0; i < d.length; i++) {var n = d[i].name;var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数itemdata.push(n);numFemale.push(femaleCount);numMale.push(maleCount);}CreateZhu(itemdata, numFemale, numMale);});}else {$.get("ashx/count.ashx?r=" + Math.random() + url,function (data) {var d = eval(data);for (var i = 0; i < d.length; i++) {var n = d[i].name;var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数var c = femaleCount + maleCount;itemdata.push([n, c]);}CreatePie(itemdata);});}}else if (o == 2) {//按年龄段flag = 2;if (type == 1) {//柱状图$.get("ashx/count.ashx?r=" + Math.random() + url,function (data) {var d = eval(data);for (var i = 0; i < d.length; i++) {var n = d[i].name;var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数itemdata.push(n);numFemale.push(femaleCount);numMale.push(maleCount);}CreateZhu(itemdata, numFemale, numMale);});}else {$.get("ashx/count.ashx?r=" + Math.random() + url,function (data) {var d = eval(data);var num = [];for (var i = 0; i < d.length; i++) {var n = d[i].name;var femaleCount = parseInt(d[i].count.split('-')[0]); //女性人数var maleCount = parseInt(d[i].count.split('-')[1]);//男性人数var c = femaleCount + maleCount;itemdata.push([n, c]);}CreatePie(itemdata);});}}}

原谅我没有剖析太细，传入的格式就是数组。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！