SVG 柱状图 | 易学教程

SVG早在XML中就已经有了，但今天在我们使用H5的过程中仍然用到很多关于SVG画图的地方这里带来一个小的案例便于理解SVG中的参数及属性

柱状图

<h3>编程语言热度</h3>
  <svg id="s1">
    <g stroke="#555" stroke-width="2">
      <line x1="50" y1="450" x2="650" y2="450"></line>
      <line x1="50" y1="450" x2="50" y2="50"></line>
    </g>
  </svg>

	var w = 600+100;
    var h = 10*40+100;
    s1.setAttribute('width', w);
    s1.setAttribute('height', h);
    var data = [
      {label:'JavaScript', value:6},
      {label:'C#', value:5},
      {label:'C', value:11},
      {label:'C++', value:5.5},
      {label:'Python', value:9},
      {label:'Java', value:12},
      {label:'CSS', value:3}
    ];
    var colWidth = 600/(2*data.length+1);
	for(var i=0; i<data.length; i++){
		var d = data[i]; //遍历每个数据对象
		var cw = colWidth;  //柱子的宽
		var ch = d.value*30;  //柱子的高
		var x = (2*i+1)*colWidth + 50;
		var y = 500-50-ch;
		//动态创建矩形
		var rect = document.createElementNS('http://www.w3.org/2000/svg','rect');
		rect.setAttribute('width', cw);
		rect.setAttribute('height', ch);
		rect.setAttribute('x', x);
		rect.setAttribute('y', y);
		rect.setAttribute('fill', "#343D46");
		s1.appendChild(rect);
		//动态添加文本和值
		var text = document.createElementNS('http://www.w3.org/2000/svg','text');
		text.setAttribute('x', x);
		text.setAttribute('y', y+ch+20);
		text.setAttribute('fill', "#343D46");
		text.innerHTML = d.label;
		s1.appendChild(text);
		var text1 = document.createElementNS('http://www.w3.org/2000/svg','text');
		text1.setAttribute('x', x+10);
		text1.setAttribute('y', y-5);
		text1.setAttribute('fill', "#343D46");
		text1.innerHTML = d.value;
		s1.appendChild(text1);
    }

在这里插入图片描述
我们在设置svg宽高是留有100相当于padding 然后我们依次获得每一个矩形的宽高及起点的坐标，具体的一些细节已经写在注释中了

如有错误，请指正

来源：CSDN

作者：.olofmeister

链接：https://blog.csdn.net/weixin_44593658/article/details/103569345

标签

svg

柱状图