Tạo biểu đồ SVG trong JavaScript

Question

Tôi đang tìm cách tạo biểu đồ hình tròn bằng cách sử dụng SVG.

Các số liệu mà tôi có rất đơn giản đủ - chỉ cần tỷ lệ phần trăm, một loạt các con số mà rõ ràng là thêm lên đến 100.

Tôi có một sự hiểu biết cơ bản của SVG, nhưng tôi không thể nghĩ ra cách để dịch những con số vào các tọa độ có ý nghĩa để sử dụng trong thẻ đường dẫn

Mọi người có thể chỉ cho tôi một tiện ích hoặc thư viện hữu ích hay không, hoặc cho biết cách sử dụng tỷ lệ phần trăm để vẽ biểu đồ hình tròn - trong JavaScript?

Answer 1

tốt nhất (IMO): Highcharts

Những người khác tôi đã nghe nói về:

• PlotKit
• Raphaël

Answer 2

Dưới đây là một vài chi tiết:

• Elycharts (dựa trên jQuery và Raphaël, giấy phép MIT)
• ZingCharts (thương mại, có SVG/VML/HTML5/Flash backends)
• Grafico (dựa trên Prototype và Raphaël, giấy phép MIT)
• d3.js (rất thư viện thú vị cho các đồ thị tương tác và năng động, giống như MIT license)

Tôi cố gắng thu thập liên kết tới tất cả thư viện đồ họa svg here.

Answer 3

Raphael là một thư viện vẽ SVG rất tốt - đặc biệt, nó đánh bại những người khác vì trong các phiên bản cũ của IE, nó tự động quay lại sử dụng VML, và do đó nó hoạt động trong IE từ phiên bản 6 trở lên như trong tất cả các trình duyệt chính khác.

Thư viện có một thư viện đồ thị riêng biệt, được gọi là gRaphael. Điều này thực hiện tất cả các loại biểu đồ thông thường (bánh, đường, thanh, vv) và có thể tạo ảnh động cho chúng.

Nếu những thứ đó không đủ, thật dễ dàng để sử dụng thư viện Raphael chính để cuộn thư viện của riêng bạn - nó rất dễ sử dụng.

Answer 4

Tín dụng cho https://stackoverflow.com/a/3642265/309483 và http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ (lưu ý rằng người cuối cùng có lỗi, cố định ở đây)

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>