几个月前用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: '<span style="color:tomato;font-weight:600">' + jgname + '</span>的人员统计分析'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
type: 'pie',
name: '人员统计分析',
data: itemdata
}]
});
}
//创建柱状图
function CreateZhu(category, numFemale, numMale) {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: '<span style="color:tomato;font-weight:600">' + jgname + '</span>的人员统计分析'
},
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 '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + ' 人<br/>' +
'总人数: ' + 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);
});
}
}
}
原谅我没有剖析太细,传入的格式就是数组。