本文介绍了一个统计类Statistic的实现细节，包括多种统计图表的绘制方法，如直方图、条形图、扇形图等，并通过具体示例展示了如何进行数据的收集、整理与描述。
剧情提要：
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼，
这次要修炼的目标是[数据的收集、整理与描述]。
[机器小伟]在[工程师阿伟]的陪同下进入了筑基初期的修炼，
这次要修炼的目标是[数据的收集、整理与描述]。
正剧开始：
星历2016年03月08日 13:51:31, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究[数据的收集、整理与描述]。
<span style="font-size:18px;">//xGlobal, yGlobal是传入自页面的全局地图坐标，不一定需要用上。
function myDraw(xGlobal, yGlobal) {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var data = [4, 10, 15, 18, 3];
var text = ['新闻', '体育', '动画', '娱乐', '戏曲'];
stat.pieChart(data, text);
}</span><span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
//config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var data = [4, 10, 15, 18, 3];
var text = ['新闻', '体育', '动画', '娱乐', '戏曲'];
stat.init(data, '节目类型', '人数/人', 1);
stat.histogram(text, 0, 0);
}</span>
<span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var data = [6, 22, 29, 38, 5];
var text = ['新闻', '体育', '动画', '娱乐', '戏曲'];
stat.pieChart(data, text);
}</span><span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
//七大洲面积统计
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var data = [4400, 1000, 3000, 900, 2400, 1800, 1400];
var text = ['亚洲','欧洲', '非洲', '大洋洲', '北美洲', '南美洲', '南极洲'];
stat.pieChart(data, text);
}</span>
<span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
//奖牌统计
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
//config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var data = [32, 28, 54,50,59,63,100];
var text = [];
for (var i = 23; i < 30; i++) {
text.push(i.toFixed(0));
}
stat.init(data, '届数', '奖牌数', 1);
stat.histogram(text, 0, 0);
}</span>
看到了这两张[人叫板老师]的直方图，小伟忽然觉得呆住了，看来一直以来都图省事，把条形图当成直方图对待了。
可是现在看来，条形图和直方图还是有区别的呀。这样一来，小伟的统计类可要有好几个函数要改名了。
于是，小伟修改了统计类，现在成这样了：
<span style="font-size:18px;">/**
* @usage 统计类
* @author mw
* @date 2016年01月05日 星期二 10:14:34
* @param
* @return
*
*/
function Statistic() {
this.statisticalSample = new Array();
this.sampleSize = 0;
this.multi = 1;
this.xLabel = '';
this.yLabel = '';
//初始化
this.init = function(array, textX, textY, multi) {
//multi为复式统计中每个数据的项数
this.statisticalSample = array;
this.sampleSize = this.statisticalSample.length;
this.multi = multi ? Math.round(multi) : 1;
this.xLabel = textX;
this.yLabel = textY;
}
this.axis2D = function(x, y, rx, ry, textX, textY) {
//原点是(x, y), rx, ry分别是x轴的长度，y轴的长度
//textX, textY分别为x轴和y轴的标注
plot.save();
plot.setFillStyle('black')
.setStrokeStyle('black');
plot.beginPath()
.moveTo(x,y)
.lineTo(x+rx,y)
.closePath()
.stroke();
plot.beginPath()
.moveTo(x,y-ry)
.lineTo(x,y)
.closePath()
.stroke();
var r0 = 10;
//x轴箭头
plot.beginPath()
.moveTo(x+rx- r0*Math.cos(Math.PI/3), y-r0*Math.sin(Math.PI/3))
.lineTo(x+rx+r0*Math.sin(Math.PI/3), y)
.lineTo(x+rx -r0*Math.cos(Math.PI/3), y+r0*Math.sin(Math.PI/3))
.closePath()
.fill()
plot.setTextAlign('left')
.fillText(textX, x+rx, y+25, 40);
plot.setTextAlign('right')
.fillText(textY, x-10, y-ry+10, 40);
//y轴箭头
plot.beginPath()
.moveTo(x+ r0*Math.sin(Math.PI/3), y-ry+r0*Math.cos(Math.PI/3))
.lineTo(x, y-ry-r0*Math.sin(Math.PI/3))
.lineTo(x-r0*Math.sin(Math.PI/3), y-ry+r0*Math.cos(Math.PI/3))
.closePath()
.fill()
plot.restore();
}
//最大值
this.max = function() {
var max = Number.NEGATIVE_INFINITY;
if (this.multi == 1) {
for (var i = 0; i < this.sampleSize; i++) {
if (max < this.statisticalSample[i]) {
max = this.statisticalSample[i];
}
}
}
else {
for (var i = 0; i < this.sampleSize; i++) {
for (var j = 0; j < this.multi; j++) {
if (max < this.statisticalSample[i][j]) {
max = this.statisticalSample[i][j];
}
}
}
}
return max;
}
//最小值
this.min = function() {
var min = Number.POSITIVE_INFINITY;
if (this.multi == 1) {
for (var i = 0; i < this.sampleSize; i++) {
if (min > this.statisticalSample[i]) {
min = this.statisticalSample[i];
}
}
}
else {
for (var i = 0; i < this.sampleSize; i++) {
for (var j = 0; j < this.multi; j++) {
if (min > this.statisticalSample[i][j]) {
min = this.statisticalSample[i][j];
}
}
}
}
return min;
}
//总计
this.total = function() {
if (this.multi == 1) {
var value = 0;
for (var i = 0; i < this.sampleSize; i++) {
value += this.statisticalSample[i];
}
return value;
}
else {
var value = [];
var tmp = 0;
for (var j = 0; j < this.multi; j++) {
tmp = 0;
for (var i = 0; i < this.sampleSize; i++) {
tmp += this.statisticalSample[i][j];
}
value.push(tmp);
}
return value;
}
}
//平均数
this.mean = function() {
var value = this.total();
if (this.sampleSize != 0) {
for (var i = 0; i < value.length; i++) {
value[i] /= this.sampleSize;
}
}
return value;
}
//样本数量
this.size = function() {
return this.sampleSize;
}
//直方图
this.histogram = function(lableArray, xOffset, yOffset) {
lableArray = lableArray ? lableArray : [];
var lables = lableArray.length;
xOffset = xOffset ? xOffset : 0;
yOffset = yOffset ? yOffset : 0;
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#FF8844', 'purple'];
var colors = colorArray.length;
var height = 380, width = 580;
plot.save()
.translate(xOffset+60, yOffset+50);
plot.setLineWidth(2)
.setTextAlign('right');
var max = Math.ceil(this.max());
var min = Math.floor(this.min());
var mod = 1;
while (max > mod * 10) {
mod *= 10;
}
if (mod > 10)
mod /= 10;
//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
var adjmax = Math.ceil(max/mod)*mod;
if (adjmax == max) {
adjmax+=mod;
}
adjmax /= mod;
var size = this.size();
var perH = Math.round((height-100) / adjmax);
var perW = Math.round((width-100) / (size+2));
//宽和高度边界
var wBound = (size+2)*perW, hBound = adjmax*perH;
plot.setLineWidth(5)
.strokeRect(0, 0, wBound, hBound);
this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
plot.setLineWidth(2);
var count = 0;
for (var i = hBound; i >-1; i -= hBound / 10) {
plot.fillText((adjmax*mod/10*count).toFixed(0), -10, i+10, 30);
count++;
if (i > 0) {
plot.beginPath()
.moveTo(0, i)
.lineTo(wBound, i)
.closePath()
.stroke();
}
}
for (var i = 0; i < size+2; i++) {
plot.beginPath()
.moveTo(i*perW, 0)
.lineTo(i*perW, hBound)
.closePath()
.stroke();
}
var xpos, xpos2;
for (var i = 0; i < size; i++) {
var h = -this.statisticalSample[i]/mod*perH;
xpos = perW*(1+i);
xpos2 = xpos + 0.5*perW;
//对于值为0的组，就不多加操作了
if (h<0) {
plot.setFillStyle(colorArray[i%colors]);
plot.fillRect(perW*(1+i), hBound, perW, h);
if (i == 0) {
xpos += 0.75*perW;
}
else {
xpos += 0.5*perW;
}
plot.setFillStyle('blue');
plot.fillText(this.statisticalSample[i].toString(), xpos, h+hBound-5, 100);
}
plot.setFillStyle('blue');
plot.setTextAlign('center');
if (i < lables) {
plot.fillText(lableArray[i], xpos2-0.5*perW,
hBound+30, 100);
}
//增加x轴的最后一个标注
if (i == size-1) {
var n1 = parseFloat(lableArray[i]);
var n2 = parseFloat(lableArray[i-1]);
var n3 = (2*n1-n2);
var s;
if (Math.abs(n3-Math.round(n3))<0.001) {
s = n3.toFixed(0);
}
else {
s = n3.toFixed(2);
}
plot.fillText(s, xpos2+0.5*perW, hBound+30, 100);
}
//plot.fillText(this.statisticalSample[i].toFixed(0), xpos2, hBound+40, 100);
}
plot.restore();
}
//条形图
this.barChart = function(lableArray, xOffset, yOffset) {
lableArray = lableArray ? lableArray : [];
var lables = lableArray.length;
xOffset = xOffset ? xOffset : 0;
yOffset = yOffset ? yOffset : 0;
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#888888', 'black'];
var colors = colorArray.length;
var height = 380, width = 580;
plot.save()
.translate(xOffset+60, yOffset+50);
plot.setLineWidth(2)
.setTextAlign('right');
var max = Math.ceil(this.max());
var min = Math.floor(this.min());
var mod = 1;
while (max > mod * 10) {
mod *= 10;
}
if (mod > 10)
mod /= 10;
//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
var adjmax = Math.ceil(max/mod)*mod;
if (adjmax == max) {
adjmax+=mod;
}
adjmax /= mod;
var size = this.size();
var perH = Math.round((height-100) / adjmax);
var perW = Math.round((width-100) / (size*2+1));
//宽和高度边界
var wBound = (2*size+1)*perW, hBound = adjmax*perH;
plot.setLineWidth(5)
.strokeRect(0, 0, wBound, hBound);
this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
plot.setLineWidth(2);
var count = 0;
for (var i = hBound; i >-1; i -= hBound / 10) {
plot.fillText((adjmax*mod/10*count).toFixed(0), -10, i+10, 30);
count++;
if (i > 0) {
plot.beginPath()
.moveTo(0, i)
.lineTo(wBound, i)
.closePath()
.stroke();
}
}
for (var i = 0; i < 2*size+1; i++) {
plot.beginPath()
.moveTo(i*perW, 0)
.lineTo(i*perW, hBound)
.closePath()
.stroke();
}
var xpos, xpos2;
for (var i = 0; i < size; i++) {
var h = -this.statisticalSample[i]/mod*perH;
xpos = perW*(1+2*i);
xpos2 = xpos + 0.5*perW;
plot.setFillStyle(colorArray[i%colors]);
plot.fillRect(perW*(1+2*i), hBound, perW, h);
if (i == 0) {
xpos += 0.75*perW;
}
else {
xpos += 0.5*perW;
}
plot.setFillStyle('blue');
plot.fillText(this.statisticalSample[i].toString(), xpos, h+hBound-5, 100);
plot.setTextAlign('center');
if (i < lables) {
plot.fillText(lableArray[i], xpos2,
hBound+30, 100);
}
//plot.fillText(this.statisticalSample[i].toFixed(0), xpos2, hBound+40, 100);
}
plot.restore();
}
//垂直方向条形图
this.verticalBarChart = function(lableArray, xOffset, yOffset) {
lableArray = lableArray ? lableArray : [];
var lables = lableArray.length;
xOffset = xOffset ? xOffset : 0;
yOffset = yOffset ? yOffset : 0;
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#888888', 'black'];
var colors = colorArray.length;
var height = 380, width = 580;
plot.save()
.translate(xOffset+60, yOffset+50);
var max = Math.ceil(this.max());
var min = Math.floor(this.min());
var mod = 1;
while (max > mod * 10) {
mod *= 10;
}
//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
if (mod > 10)
mod /= 10;
var adjmax = Math.ceil(max/mod)*mod;
if (adjmax == max) {
adjmax+=mod;
}
adjmax /= mod;
var size = this.size();
var perH = Math.round((height-100) / (size*2+1));
var perW = Math.round((width-100) / adjmax);
//宽和高度边界
var hBound = (2*size+1)*perH, wBound = adjmax*perW;
plot.setLineWidth(5)
.strokeRect(0, 0, wBound, hBound);
this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
plot.setLineWidth(2)
.setTextAlign('center');
var count = 0;
for (var i = 0; i < wBound+1; i += wBound / 10) {
plot.fillText((adjmax*mod/10*count).toFixed(0), i, hBound+25, 30);
count++;
if (i > 0) {
plot.beginPath()
.moveTo(i, 0)
.lineTo(i, hBound)
.closePath()
.stroke();
}
}
for (var i = 0; i < 2*size+1; i++) {
plot.beginPath()
.moveTo(0, i*perH)
.lineTo(wBound, i*perH)
.closePath()
.stroke();
}
var ypos, ypos2;
for (var i = 0; i < size; i++) {
var xSpan = this.statisticalSample[i]/mod*perW;
ypos = perH*(1+2*i);
ypos2 = ypos + 0.5*perH+5;
plot.setFillStyle(colorArray[i%colors]);
plot.fillRect(0, ypos, xSpan, perH);
plot.setFillStyle('blue');
plot.fillText(this.statisticalSample[i].toString(), xSpan+20, ypos+20, 100);
plot.setTextAlign('right');
if (i < lables) {
plot.fillText(lableArray[i], -10, ypos2, 100);
}
}
plot.restore();
}
//复式条形图
this.multiBarChart = function(lableArray, lableArray2, xOffset, yOffset) {
//lableArray是统计数据中横轴的描述
//lableArray2是所统计的项目的描述
lableArray = lableArray ? lableArray : [];
var lables = lableArray.length;
xOffset = xOffset ? xOffset : 0;
yOffset = yOffset ? yOffset : 0;
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#888888', 'black'];
var colors = colorArray.length;
var height = 380, width = 580;
plot.save()
.translate(xOffset+60, yOffset+50);
plot.setLineWidth(2)
.setTextAlign('right');
var max = Math.ceil(this.max());
var min = Math.floor(this.min());
var mod = 1;
while (max > mod * 10) {
mod *= 10;
}
if (mod > 10)
mod /= 10;
//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
var adjmax = Math.ceil(max/mod)*mod;
if (adjmax == max) {
adjmax+=mod;
}
adjmax /= mod;
var size = this.size();
var perH = Math.round((height-100) / adjmax);
var part = size*(this.multi+1)+1;
var perW = Math.round((width-100) / part);
//宽和高度边界
var wBound = part*perW, hBound = adjmax*perH;
plot.setLineWidth(5)
.strokeRect(0, 0, wBound, hBound);
this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
plot.setLineWidth(2);
var count = 0;
var s = '';
for (var i = hBound; i >-1; i -= hBound / 10) {
if (max < 100) {
s = (adjmax*mod/10*count).toFixed(1);
}
else {
s = (adjmax*mod/10*count).toFixed(0);
}
plot.fillText(s, -10, i+10, 30);
count++;
if (i > 0) {
plot.beginPath()
.moveTo(0, i)
.lineTo(wBound, i)
.closePath()
.stroke();
}
}
for (var i = 0; i < part; i++) {
plot.beginPath()
.moveTo(i*perW, 0)
.lineTo(i*perW, hBound)
.closePath()
.stroke();
}
var xpos, xpos2;
var h;
for (var i = 0; i < size; i++) {
for (var j = 0; j < this.multi; j++) {
xpos = perW*((this.multi+1)*i+j+1);
plot.setFillStyle(colorArray[j%colors]);
h = -this.statisticalSample[i][j]/mod*perH;
plot.fillRect(xpos, hBound, perW, h);
plot.setFillStyle('blue');
if (i > 0) {
xpos += 0.5*perW
}
else {
xpos += perW;
}
plot.fillText(this.statisticalSample[i][j].toString(), xpos, h+hBound-5, 100);
}
xpos2 = perW*((this.multi+1)*i+1) + 0.5*this.multi*perW;
plot.setFillStyle('black');
plot.setTextAlign('center');
if (i < lables) {
plot.fillText(lableArray[i], xpos2,
hBound+30, 100);
}
//plot.fillText(this.statisticalSample[i].toFixed(0), xpos2, hBound+40, 100);
}
plot.setTextAlign('left');
for (var j = 0; j < this.multi; j++) {
plot.setFillStyle(colorArray[j%colors]);
plot.fillRect(wBound - 50, -20-25*(this.multi-j-1), 20, 12);
plot.fillText(lableArray2[j], wBound-20, -20-25*(this.multi-j-1)+12, 50);
}
plot.restore();
}
//复式折线统计图
this.multiLineGraph = function(lableArray, lableArray2, xOffset, yOffset) {
//lableArray是统计数据中横轴的描述
//lableArray2是所统计的项目的描述
lableArray = lableArray ? lableArray : [];
var lables = lableArray.length;
xOffset = xOffset ? xOffset : 0;
yOffset = yOffset ? yOffset : 0;
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#888888', 'black'];
var colors = colorArray.length;
var height = 380, width = 580;
plot.save()
.translate(xOffset+60, yOffset+50);
plot.setLineWidth(2)
.setTextAlign('right');
var max = Math.ceil(this.max());
var min = Math.floor(this.min());
var mod = 1;
while (max > mod * 10) {
mod *= 10;
}
if (mod > 10)
mod /= 10;
//最大值的末位为0的近似数，比如最大值25，最合适的近似数为30
var adjmax = Math.ceil(max/mod)*mod;
if (adjmax == max) {
adjmax+=mod;
}
adjmax /= mod;
var size = this.size();
var perH = Math.round((height-100) / adjmax);
var part = 2 * size;
var perW = Math.round((width-100) / part);
//宽和高度边界
var wBound = part*perW, hBound = adjmax*perH;
plot.setLineWidth(5)
.strokeRect(0, 0, wBound, hBound);
this.axis2D(0, hBound, wBound+20, hBound+20, this.xLabel, this.yLabel);
plot.setLineWidth(2);
var count = 0;
//图表方格
for (var i = hBound; i >-1; i -= hBound / 10) {
plot.fillText((adjmax*mod/10*count).toFixed(0), -10, i+10, 30);
count++;
if (i > 0) {
plot.beginPath()
.moveTo(0, i)
.lineTo(wBound, i)
.closePath()
.stroke();
}
}
for (var i = 0; i < part; i++) {
plot.beginPath()
.moveTo(i*perW, 0)
.lineTo(i*perW, hBound)
.closePath()
.stroke();
}
var xpos, xpos2, ypos;
//折线和图例
for (var j = 0; j < this.multi; j++) {
plot.setStrokeStyle(colorArray[j%colors]);
for (var i = 0; i < size; i++) {
xpos = perW*(2 * i+1);
ypos = hBound-this.statisticalSample[i][j]/mod*perH;
//plot.fillRect(xpos, hBound, perW, -this.statisticalSample[i][j]/mod*perH);
//
if (i==0) {
plot.beginPath()
.moveTo(xpos, ypos);
}
else if (i < size-1) {
plot.lineTo(xpos, ypos);
}
else {
plot.lineTo(xpos, ypos)
.moveTo(xpos, ypos)
.closePath()
.stroke();
}
}
//plot.fillText(this.statisticalSample[i].toFixed(0), xpos2, hBound+40, 100);
}
//数据点
for (var j = 0; j < this.multi; j++) {
for (var i = 0; i < size; i++) {
plot.setFillStyle(colorArray[j%colors]);
xpos = perW*(2 * i+1);
ypos = hBound-this.statisticalSample[i][j]/mod*perH;
shape.fillCircle(xpos, ypos, 5);
plot.setFillStyle('blue');
plot.fillText(this.statisticalSample[i][j].toString(), xpos+0.55*perW, ypos-5, 100);
}
}
//x轴标签
for (var i = 0; i < size; i++) {
xpos2 = perW*(2 * i+1);
plot.setFillStyle('black');
plot.setTextAlign('center');
if (i < lables) {
plot.fillText(lableArray[i], xpos2,
hBound+30, 100);
}
}
plot.setTextAlign('left');
for (var j = 0; j < this.multi; j++) {
plot.setFillStyle(colorArray[j%colors]);
plot.fillRect(wBound - 50, -20-25*(this.multi-j-1), 20, 2);
plot.fillText(lableArray2[j], wBound-20, -20-25*(this.multi-j-1)+12, 50);
}
plot.restore();
}
/**
* @usage 扇形统计图
* @author mw
* @date 2016年02月19日 星期五 12:33:05
* @param
* @return
*
*/
//扇形统计图 Pie chart
this.pieChart = function(d, t) {
var colorArray = ['red', 'orange', '#0088FF', 'green', 'cyan', 'blue', '#FF00FF',
'#888888', 'black'];
var colors = colorArray.length;
var data = new Array();
data = d;
var text = new Array();
text = t;
var itemCount = data.length;
var total = 0;
for (var i = 0; i < itemCount; i++) {
total += data[i];
}
var percentArray = [];
for (var i = 0; i < itemCount; i++) {
percentArray.push(data[i]/total);
}
//document.write(percentArray);
var r = 150;
var sAngle = 0, eAngle = 0;
var textX, textY;
//在饼图右侧绘制图例
var sampX = 200, sampY = -150;
for (var i = 0; i < itemCount; i++) {
if (i == 0) {
sAngle = 0;
eAngle = 0;
}
eAngle -= Math.PI*2*percentArray[i];
plot.setFillStyle(colorArray[i%colors]);
shape.fillRect(sampX, sampY, 50, 20);
plot.beginPath()
.moveTo(0, 0)
.arc(0, 0, r, sAngle, eAngle, 1)
.closePath()
.fill();
sampY += 30;
sAngle -= Math.PI*2*percentArray[i];
}
sAngle = 0, eAngle = 0;
sampX = 200, sampY = -150;
//先填充颜色再添加标注文字，是为了不让过小扇形区块的文字被遮盖。
for (var i = 0; i < itemCount; i++) {
if (i == 0) {
sAngle = 0;
eAngle = 0;
}
eAngle -= Math.PI*2*percentArray[i];
if (percentArray[i] > 0.05) {
textX = 0.7*r*Math.cos((sAngle+eAngle)/2);
textY = 0.6*r*Math.sin((sAngle+eAngle)/2);
}
else {
textX = 1.2*r*Math.cos((sAngle+eAngle)/2);
textY = 1.2*r*Math.sin((sAngle+eAngle)/2);
}
var s1 = text[i];
var s2 = (percentArray[i]*100).toFixed(2)+'%';
var measure = s1.length > s2.length ? plot.measureText(s1) : plot.measureText(s2);
plot.setFillStyle('black')
.fillText(s1, textX-measure/2, textY, measure)
.fillText(s2, textX-measure/2, textY+20, measure);
plot.fillText(text[i], sampX+30, sampY+5, 100);
sampY += 30;
sAngle -= Math.PI*2*percentArray[i];
//document.write(sAngle, '-->', eAngle, '-->');
}
}
}
</span>
<span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
//费尔兹奖统计
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
//config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var rawdata = [
29, 39,35,33,39,28,33,35,
31,31,37,32,38,36,31,39,
32,38,37,34,29,34,38,32,
35,36,33,29,32,35,36,37,
39,38,40,38,37,39,38,34,
33,40,36,36,37,40,31,38,
38,40,40,37];
var data = [];
var text = [];
var len = rawdata.length;
//初始化各组频数
//0到60岁，5岁一组
for (var i = 0; i < 60; i+=5) {
data.push(0);
text.push(i.toFixed(0));
}
//频数统计
var group;
for (var i = 0; i < len; i++) {
group = Math.floor(rawdata[i]/5);
data[group]+=1;
}
stat.init(data, '年龄', '人数', 1);
stat.histogram(text, 0, 0);
}
</span>
<span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
//config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var rawdata = [
28,62,54,29,32,47,68,27,55,43,
36,79,46,54,25,82,16,39,32,64,
61,59,67,56,45,74,49,36,39,52,
85,65,48,58,59,64,91,67,54,57,
68,54,71,26,59,47,58,52,52,70
];
var data = [];
var text = [];
var len = rawdata.length;
//初始化各组频数
//0-100，隔5一组
var gap = 10;
var start = 10;
var end = 100;
for (var i = start; i < end; i+=gap) {
data.push(0);
text.push(i.toFixed(0));
}
//频数统计
var group;
for (var i = 0; i < len; i++) {
group = Math.floor((rawdata[i]-start)/gap);
data[group]+=1;
}
stat.init(data, '西红柿个数', '株数', 1);
stat.histogram(text, 0, 0);
}</span>
<span style="font-size:18px;">function myDraw(xGlobal, yGlobal) {
//2009年各省市城市园林绿地面积
var config = new PlotConfiguration();
config.init();
config.setPreference();
var r = 20;
//config.setSector(1,1,1,1);
//config.graphPaper2D(0, 0, r);
//config.axis2D(0, 0,180);
var stat = new Statistic();
var rawdata = [
61695,116929,54884,22372,
17369,214989,42940,2174,
60923,74362,401604,23426,
27973,67269,57812,14702,
29585,41330,48947,3290,
84145,37596,32451,14525,
34755,146993,66817,36359,
64234,62947,27771
];
var data = [];
var text = [];
var len = rawdata.length;
//初始化各组频数
//0-100，隔5一组
var gap = 50000;
var start = 0;
var end = 500000;
for (var i = start; i < end; i+=gap) {
data.push(0);
text.push((i/10000).toFixed(0));
}
//频数统计
var group;
for (var i = 0; i < len; i++) {
group = Math.floor((rawdata[i]-start)/gap);
data[group]+=1;
}
stat.init(data, '面积', '地区数', 1);
stat.histogram(text, 0, 0);
}</span>
本节到此结束，欲知后事如何，请看下回分解。
[注]:统计类Statisic参见[从头学数学] 第105节 整理与复习--统计与概率。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
