在JavaScript中生成SVG圖表

Question

我正在尋找一種使用SVG生成餅圖的方法。

我的數字是足夠簡單 - 只是百分比，數字數組，顯然加起來100

我有SVG的一個基本的瞭解，但我想不出如何將這些數字翻譯成在路徑標記中使用的有意義的座標

任何人都可以指向一個有用的工具或庫，或者提供關於如何使用百分比繪製餅圖的任何提示 - 在JavaScript中？

Answer 1

最好的（IMO）：我聽說過Highcharts

其他：

• PlotKit
• Raphaël

Answer 2

下面是更多一些：

• Elycharts（基於jQuery和拉斐爾，MIT許可證）
• Grafico（基於原型和拉斐爾，MIT許可證）
• d3.js（非常
• ZingCharts（商業，具有SVG/VML/HTML5 /閃存後端）好的庫，用於互動性和動態圖形，MIT樣license）

我嘗試收集鏈接到所有SVG圖形庫here。

Answer 3

Raphael是一個非常好的SVG繪圖庫 - 尤其是它擊敗了其他人，因爲在較早版本的IE中，它會自動回退到使用VML，因此它可以在版本6以上的IE中運行就像所有其他主流瀏覽器一樣。

它有一個單獨的圖形庫，名爲gRaphael。這可以處理所有常見的圖形類型（餅圖，線條，條形等），並且可以對它們進行動畫處理。

如果這些還不夠，使用主拉斐爾圖書館可以很容易地推出自己的產品 - 這非常容易使用。

Answer 4

貸https://stackoverflow.com/a/3642265/309483和http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/（注意，最後一個有一個bug，在這裏固定）

function makeSVG(tag, attrs) { 
 
    var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
 
    for (var k in attrs) 
 
     if (attrs.hasOwnProperty(k)) el.setAttribute(k, attrs[k]); 
 
    return el; 
 
} 
 

 
function drawArcs(paper, pieData){ 
 
    var total = pieData.reduce(function (accu, that) { return that + accu; }, 0); 
 
    var sectorAngleArr = pieData.map(function (v) { return 360 * v/total; }); 
 

 
    var startAngle = 0; 
 
    var endAngle = 0; 
 
    for (var i=0; i<sectorAngleArr.length; i++){ 
 
     startAngle = endAngle; 
 
     endAngle = startAngle + sectorAngleArr[i]; 
 

 
     var x1,x2,y1,y2 ; 
 

 
     x1 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*startAngle/180))); 
 
     y1 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*startAngle/180))); 
 

 
     x2 = parseInt(Math.round(200 + 195*Math.cos(Math.PI*endAngle/180))); 
 
     y2 = parseInt(Math.round(200 + 195*Math.sin(Math.PI*endAngle/180))); 
 

 
     var d = "M200,200 L" + x1 + "," + y1 + " A195,195 0 " + 
 
       ((endAngle-startAngle > 180) ? 1 : 0) + ",1 " + x2 + "," + y2 + " z"; 
 
     //alert(d); // enable to see coords as they are displayed 
 
     var c = parseInt(i/sectorAngleArr.length * 360); 
 
     var arc = makeSVG("path", {d: d, fill: "hsl(" + c + ", 66%, 50%)"}); 
 
     paper.appendChild(arc); 
 
     arc.onclick = (function (originalData) { 
 
      return function(event) { 
 
      alert("Associated pie piece data: " + originalData); 
 
      } 
 
     })(pieData[i]); 
 
    } 
 
} 
 
var svgdoc = document.getElementById("s"); 
 
drawArcs(svgdoc, [52,15,20,80]); // here is the pie chart data 
 

 
// You can attach additional content (from e.g. AJAX) like this: 
 
var parser = new DOMParser(); 
 
var docToEmbed = parser.parseFromString(
 
    "<svg xmlns='http://www.w3.org/2000/svg'><text x='50' y='50' fill='black'>hi</text></svg>", 
 
    "image/svg+xml"); 
 
Array.prototype.slice.call(docToEmbed.documentElement.childNodes).forEach(function(elem) { 
 
    svgdoc.appendChild(document.importNode(elem, true)); 
 
});

#con { 
 
    resize:both; 
 
    overflow:hidden; 
 
    display:inline-block; 
 
    width:20em; 
 
    height:20em; 
 
    padding:0.5em; 
 
}

<div id="con"> 
 
<!-- the div container is of course optional. It is used with 
 
    {width,height}="100%" below to make the chart resizable. --> 
 
<svg width="100%" height="100%" id="s" 
 
xmlns="http://www.w3.org/2000/svg" viewbox="0 0 400 400"> 
 
    <style type="text/css"> 
 
    path:hover { 
 
     opacity: 0.8; 
 
    } 
 
    </style> 
 
</svg> 
 
</div>