[从头学数学] 第88节 折线统计图
来源:互联网 发布:紫菜三角梅淘宝店铺 编辑:程序博客网 时间:2024/06/05 10:13
剧情提要:
[机器小伟]在[工程师阿伟]的陪同下进入练气期第十层功法的修炼,
这次要修炼的目标是[折线统计图]。
小伟只改了一下调用的方法名称:
就可以得到以下结果:
而且也是很方便扩展的,比如:
[机器小伟]在[工程师阿伟]的陪同下进入练气期第十层功法的修炼,
这次要修炼的目标是[折线统计图]。
正剧开始:
星历2016年02月15日 12:42:33, 银河系厄尔斯星球中华帝国江南行省。
[工程师阿伟]正在和[机器小伟]一起研究折线统计图的绘制。
[人叫板老师]是根据条形图引出了折线图的概念,小伟决定也这样做。
上次绘制条形图时有这样一个例子:
<span style="font-size:18px;">function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); var stat = new Statistic(); var data = [[36779,46106],[36564,54731],[34036,64125],[31373,74721],[29434,85900],[28512,98625]]; var text = ['2006','2007','2008', '2009', '2010', '2011']; var text2 = ['固定电话', '移动电话']; stat.init(data, '年份', '用户/万户', 2); var x = 0, y = 20; stat.multiHistogram(text,text2, x, y);}</span>
小伟只改了一下调用的方法名称:
<span style="font-size:18px;">function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); var stat = new Statistic(); var data = [[36779,46106],[36564,54731],[34036,64125],[31373,74721],[29434,85900],[28512,98625]]; var text = ['2006','2007','2008', '2009', '2010', '2011']; var text2 = ['固定电话', '移动电话']; stat.init(data, '年份', '用户/万户', 2); var x = 0, y = 20; stat.multiLineGraph(text,text2, x, y);}</span>
就可以得到以下结果:
看来这样就可以了。
<span style="font-size:18px;">//复式折线统计图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,最合适的近似数为30var 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++) {plot.setFillStyle(colorArray[j%colors]);for (var i = 0; i < size; i++) { xpos = perW*(2 * i+1);ypos = hBound-this.statisticalSample[i][j]/mod*perH;shape.fillCircle(xpos, ypos, 5);}}//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();}</span>
而且也是很方便扩展的,比如:
<span style="font-size:18px;">function myDraw() { var config = new PlotConfiguration(); config.init(); config.setPreference(); var stat = new Statistic(); var data = [[36779,46106, 10000],[36564,54731, 10000],[34036,64125, 10000],[31373,74721, 10000],[29434,85900, 10000],[28512,98625, 10000]]; var text = ['2006','2007','2008', '2009', '2010', '2011']; var text2 = ['固定电话', '移动电话', '其它']; stat.init(data, '年份', '用户/万户', 3); var x = 0, y = 20; stat.multiLineGraph(text,text2, x, y);}</span>
但是这次[人叫板老师]举的例子,纵坐标的起点都不是从0开始的。
不过小伟觉得晢时还是不改代码了,否则每次都要自己去提供起点和刻度,是一件很麻烦的事情。
上海市的出生人口数比死亡人口口数要低。
有没有搞错?这出生人口明显要高于死亡人口啊。
要说共同规律,小伟只看出来死亡人口在增加,其它好像没什么呀。
这个坐标起点的问题是这样的明显,小伟决定视而不见。
本节到此结束,欲知后事如何,请看下回分解。
0 0
- [从头学数学] 第88节 折线统计图
- [从头学数学] 第62节 条形统计图
- [从头学数学] 第72节 平均数与条形统计图
- [从头学数学] 第96节 扇形统计图
- [从头学数学] 第03节 位置
- [从头学数学] 第40节 测量
- [从头学数学] 第52节 面积
- [从头学数学] 第65节 四则运算
- [从头学数学] 第69节 三角形
- [从头学数学] 第75节 位置
- [从头学数学] 第77节 可能性
- [从头学数学] 第93节 比
- [从头学数学] 第94节 圆
- [从头学数学] 第98节 负数
- [从头学数学] 第101节 比例
- [从头学数学] 第108节 有理数
- [从头学数学] 第112节 一元一次方程
- [从头学数学] 第118节 实数
- JAVA应用程序获取当前路径
- 忙些更好
- Java类中代码的加载顺序
- [C语言]查找链表的中间元素
- 各种排序算法的总结和比较
- [从头学数学] 第88节 折线统计图
- codeforces626E.Simple Skewness(三分)
- SAP外向交货单中的批次拆分应用于免费货物的小问题
- USACO 5.4 Canada Tour dp
- 初识 TextKit
- 海信智能电视如何看电视直播
- 整理github上的优秀开源项目-不定期更新
- 比较Make和CMake
- 百度编辑器ueditor的简单使用