Question

javascript+SVG

求用javascript+SVG实现获取任意名字首字母并按要求画出柱形图，要求如下图（给出正确答案可追加悬赏），分不是问题，请各位帮忙！最好能有注解。
26个字母是被分成了6组，按照每组中含有字母个数增加柱形图高度。





Answer 1

createHistogram = function(document)
{
	var NewSVGElement = function(Q,A)//生成SVG元素
	{
		var F;
		Q = 'string' === typeof Q ? document.createElementNS('http' + '://www.w3.org/2000/svg',Q) : Q
		for (F in A) F.indexOf('xlink:') ?
			Q.setAttribute(F,A[F]) ://不是xlink命名空间的属性
			Q.setAttributeNS('http' + '://www.w3.org/1999/xlink',F.substr(6),A[F])//是xlink命名空间的属性
		return Q
	},Group = {},T = ['ABCD','EFGH','IJKL','MNOP','QRSTU','VWXYZ'],F;
	for (F = T.length;F--;)//向Group中初始化bins的数据
		for (;T[F];T[F] = T[F].substr(1))
			Group[T[F].charAt(0)] = F

	return function(SVG,Q)
	{
		var	Count = Array(6),//存放bins计数
			G,//<g>
			Max = 0,//存放最高矩形高度用於确定SVG绘图高度
			F;//临时变量|计数器变量
		Q = Q.toUpperCase().split('')//转化成大写後单字分隔
		for (;Q.length;Q.shift())//bins计数, 确定最高高度
		{
			F = Group[Q[0]]
			Count[F] = (Count[F] || 0) + 1
			Max < Count[F] && (Max = Count[F])
		}
		50 * Max > SVG.getAttribute('height') && SVG.setAttribute('height',50 * Max)
		SVG.appendChild(G = NewSVGElement('g',
		{
			transform : 'translate(0 ' + SVG.getAttribute('height') + ') scale(1 -1)',//通过坐标变换将绘制设置为原点在左下角, 向右为x增, 向上为y增
			style : 'fill:blue;stroke:black'//默认填充样式
		}))
		for (F = 0;F < Count.length;++F)
			G.appendChild(NewSVGElement('rect',
			{
				width : 50,
				height : 50 * Count[F] || 1,
				x : 50 * F,
				y : 0
			}))
		return SVG
	}
}(document)

直接测试代码

var TestSVG = document.createElementNS('http' + '://www.w3.org/2000/svg'
,'svg')
TestSVG.setAttribute('width',300)
TestSVG.setAttribute('height',400)
document.getElementsByTagName('body')[0].appendChild(TestSVG)
createHistogram(TestSVG,'ABCDEFGHIJKLMNOPQRSTUVWXYZ'),''

Baidu编辑器简直愚蠢, 啥字符串都想搞成超链接

有Bug说啊..

懒得严格测试