Генерация SVG-диаграмм в JavaScript

Question

Я ищу способ создания круговых диаграмм с использованием SVG.

Числа, которые у меня есть, достаточно просты - только проценты, массив чисел, которые, очевидно, составляют в сумме 100.

У меня есть базовое понимание SVG, но я не могу понять, как перевести эти числа в значимые координаты для использования в теге пути

Может ли кто-нибудь указать мне полезную утилиту или библиотеку или дать какие-нибудь подсказки относительно того, как я могу использовать проценты для рисования круговой диаграммы - в JavaScript?

Answer 1

Кредиты на https://stackoverflow.com/a/3642265/309483 и http://jbkflex.wordpress.com/2011/07/28/creating-a-svg-pie-chart-html5/ (обратите внимание, что у последнего есть ошибка, исправленная здесь)

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>

Answer 2

Вот еще несколько:

• Elycharts (на основе jQuery и Raphaël, лицензия MIT)
• ZingCharts (коммерческий, имеет SVG / VML / HTML5 / Flash backends)
• Grafico (на основе Prototype и Raphaël, лицензия MIT)
• d3.js (очень хорошая библиотека для интерактивных и динамических графиков, MIT-подобная лицензия )

Я пытаюсь собрать ссылки на все графические библиотеки svg здесь .

Answer 3

Raphael - очень хорошая библиотека для рисования SVG - в частности, она превосходит другие, потому что в более старых версиях IE она автоматически возвращается к использованию VML и, следовательно, работает в IE начиная с версии 6и выше, как и во всех других основных браузерах.

Имеет отдельную графическую библиотеку, которая называется gRaphael .Это делает все обычные типы графиков (пироги, линии, столбцы и т. Д.) И может анимировать их тоже.

Если их недостаточно, достаточно просто использовать основную библиотеку Raphael, чтобы свернуть свою собственную -это очень легко использовать.

Answer 4

Лучшие (ИМО): Highcharts

Другие, о которых я слышал:

• PlotKit
• Рафаель