在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>