SVG-矩形數據圖
阿新 • • 發佈:2018-02-08
label ner 線性 innerhtml min xmlhttp url tex 兼容性
要求:使用SVG標簽
1.先畫出坐標軸
<g stroke="#545454" stroke-width="3"> <line x1="100" y1="100" x2="100" y2="900"></line> <line x1="100" y1="900" x2="900" y2="900"></line> <polyline points="90,120 100,100 110,120" fill-opacity="0"></polyline> <polyline points="880,890 900,900 880,910"fill-opacity="0"></polyline> </g>
坐標軸使用Line標簽,箭頭使用polyline折線標簽
2.顏色使用隨機漸變,創建隨機顏色函數rc
function rc(min,max){ var r=Math.round(Math.random()*(max-min)); var g=Math.round(Math.random()*(max-min)); var b=Math.round(Math.random()*(max-min)); return "rgb("+r+","+g+","+b+")"; }
3.獲取數據,本DOME使用原生AJAX,沒有做兼容性處理
var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if (xhr.readyState=="4"&&xhr.status=="200"){ var data=eval("("+xhr.responseText+")"); doResponse(data); } } xhr.open("GET","../res/curriculum",true); xhr.send(null);
4.構寫處理數據函數doResponse
var w=1000; var h=1000; function doResponse(data){ // 設置矩形寬度 var rectW=(w-200)/(data.length*2); // Y坐標軸據左邊距離 var baseLineL=100; // X坐標軸距頂部距離 var baselineT=h-100; // 創建文檔碎片 var trg=document.createDocumentFragment(); for(var i=0;i<data.length;i++) { // 獲取隨機顏色 var r = rc(0, 255); // 創建線性漸變,順便創建文本--> var html = `<defs> <linearGradient id="g${i}" x1="0" y1="0" x2="0" y2="100%"> <stop offset="0" stop-color="${r}"></stop> <stop offset="1" stop-color="#ffffff" stop-opacity="0"></stop> </linearGradient> </defs> <text x="${baseLineL+(i*2+1)*rectW}" y="${baselineT+20}" fill="black">${data[i].label}</text> <text x="${baseLineL+(i*2+1)*rectW}" y="${baselineT - (data[i].value * 100)-15}" fill="black">${data[i].value}</text> `; s1.innerHTML += html; //創建矩形,別忘了命名空間 var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("width", rectW); rect.setAttribute("height",(data[i].value) * 100); rect.setAttribute("x", baseLineL + (i*2+1)*rectW); rect.setAttribute("y", baselineT - (data[i].value * 100)); rect.setAttribute("fill", "url(#g" + i + ")"); trg.appendChild(rect); } // 把trg碎片放在DOM中 s1.appendChild(trg); trg=null; }
SVG-矩形數據圖