8
votes

Génération de graphique SVG en JavaScript

Je cherche un moyen de générer des graphiques à tarte à l'aide de SVG.

Les chiffres que j'ai sont suffisamment simples - juste des pourcentages, une gamme de nombres qui correspondent évidemment jusqu'à 100.

J'ai une compréhension de base de SVG, mais je ne peux pas penser à traduire ces chiffres en coordonnées significatives à utiliser dans la balise de chemin

Quelqu'un peut-il me signaler à une utilité ou à une bibliothèque utile ou à donner des indices sur la manière dont je pourrais utiliser des pourcentages pour dessiner un graphique à secteurs - en JavaScript?

javascript charts svg

1 commentaires

Connexes (mais pas duplicates): SVG VS Toile pour Pie Tableaux ; Graphiques SVG Pie utilisant Ruby ; Xslt Lib pour SVG Graphiques .

4 Réponses :

1
votes

Le meilleur (imo): Highchartts

D'autres j'ai entendu parler de:

0 commentaires

6
votes

Voici quelques autres:

Elycharts (basé sur JQuery et Raphaël, licence MIT)
Zingcharts (commercial, SVG / VML / HTML5 / Flash Backends)
Grafico (basé sur le prototype et le prototype et Raphaël, licence MIT)
d3.js (très belle bibliothèque pour des graphiques interactifs et dynamiques, mit - comme license )
J'essaie de collecter des liens vers toutes les bibliothèques graphiques SVG ici .

0 commentaires

3
votes

Raphael est une très bonne bibliothèque de dessin SVG - en particulier, elle bat les autres car dans des versions plus anciennes de IE , il redevient automatiquement à l'aide de VML et fonctionnait donc dans IE à partir de la version 6 et de la version 6, ainsi que dans tous les autres navigateurs grand public.

Il dispose d'une bibliothèque graphique distincte, appelée graphael . Cela fait tous les types de graphiques habituels (tartes, lignes, bars, etc.) et peut les animer aussi.

Si ceux-ci ne suffisent pas, il est assez facile d'utiliser la principale bibliothèque Raphael pour rouler votre propre - c'est très facile à utiliser.

0 commentaires

17
votes

crédits à https://stackoverflow.com/a/3642265/309483 et http://jbkflex.wordpress.com/2011/07/28/ Création-A-SVG-Pie-TRANT-HTML5 / (Notez que le dernier a un bogue, corrigé ici)

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

0 commentaires