93

Je souhaite créer un graphique à secteurs en JavaScript. Lors de la recherche, j'ai trouvé l'API Google Charts. Depuis que nous utilisons jQuery, j'ai trouvé qu'il existe une intégration jQuery pour Google Charts disponible.

Mais mon problème est ici que les données réelles sont envoyées au serveur Google pour créer les graphiques. Existe-t-il un moyen d'empêcher l'envoi des données à Google? Je suis préoccupé par l'envoi de mes données à un tiers.

javascript jquery jquery-plugins google-visualization Arun P Johny
la source

48

jqPlot a l' air plutôt bien et il est open source.

Voici un lien vers les exemples jqPlot les plus impressionnants et les plus récents .

Thomas Bratt
la source

note: dans la plupart des versions (récentes aussi pour le moment), il utilise une référence $ en dehors d'une déclaration (function ($) ..), donc cela pourrait entrer en conflit avec un prototype ou autre chose

Mario Peshev

99

Flot

Limitations: lignes, points, zones remplies, barres, secteurs et combinaisons de ceux-ci

Du point de vue de l'interaction, Flot vous rapprochera de loin le plus possible du graphisme Flash jQuery. Bien que la sortie graphique soit assez lisse et belle, vous pouvez également interagir avec des points de données. Ce que je veux dire par là, c'est que vous pouvez avoir la possibilité de survoler un point de données et d'obtenir un retour visuel sur la valeur de ce point dans le graphique.

La version tronc de flot prend en charge les graphiques à secteurs.

Capacité Flot Zoom.

En plus de cela, vous avez également la possibilité de sélectionner un morceau du graphique pour récupérer des données pour une «zone» particulière. En tant que caractéristique secondaire de ce «zonage», vous pouvez également sélectionner une zone sur un graphique et zoomer pour voir les points de données d'un peu plus près. Très cool .

Sparklines

Limitations: tarte, ligne, barre, combinaison

Sparklines est mon mini-outil graphique préféré. Vraiment idéal pour les graphiques de style tableau de bord (pensez au tableau de bord Google Analytics la prochaine fois que vous vous connectez). Parce qu'ils sont si petits, ils peuvent être inclus en ligne (comme dans l'exemple ci-dessus). Une autre bonne idée qui peut être utilisée dans tous les plugins graphiques est les capacités d'auto-actualisation. Leur démo Mouse-Speed vous montre la puissance de la cartographie en direct à son meilleur.

Graphique de requête 0,21

Limitations: zone, ligne, barre et combinaisons de ces

jQuery Chart 0.21 n'est pas le plus beau plugin de création de graphiques, il faut le dire. Ses fonctionnalités sont assez basiques en ce qui concerne les graphiques qu'il peut gérer, mais cela peut être flexible si vous pouvez y consacrer du temps et des efforts.

L'ajout de valeurs dans un graphique est relativement simple:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Limitations: barre, ligne

jQchart est étrange, ils ont intégré des transistions d'animation et des fonctionnalités de glisser / déposer dans le graphique, mais c'est un peu maladroit - et apparemment inutile. Il génère de jolis graphiques si vous obtenez la CSSbonne configuration, mais il y a mieux là-bas.

TufteGraph

Limitations: barre et barre empilée

Tuftegraph se vend comme «de jolis graphiques à barres que vous montreriez à votre mère». Il se rapproche, Flot est plus joli, mais Tufte se prête bien à être très léger. Bien que cela entraîne des restrictions - il y a peu d'options parmi lesquelles choisir, vous obtenez donc ce que l'on vous donne. Consultez-le pour un graphique à barres des gains rapides.

Sorantis
la source

Merci pour votre réponse. Je vérifie jqPlot maintenant, il semble résoudre mon problème. Mais un problème persiste, j'ai besoin que les légendes du graphique apparaissent dans le graphique plutôt qu'à l'extérieur.

Arun P Johny

7

Chaque fois que je vois une belle liste comme celle-ci, je souhaite que chaque élément soit une réponse distincte afin de pouvoir voter indépendamment. Il serait tellement plus efficace d'utiliser simplement la bibliothèque avec le score le plus élevé.

Jesse Aldridge

2

Sonnerie ici en tant que quelqu'un qui a utilisé Flot et a trouvé que c'était une bonne bibliothèque solide.

Brighid McDonnell

grr j'ai essayé flot mais je l'ai abandonné car je ne pouvais pas personnaliser les étiquettes des axes

chiliNUT

Sorantis, le lien vers le graphique de requête 0.21 est mort.

jawo

5

Des tonnes de bonnes suggestions ici, je vais simplement jeter ZingChart sur la pile pour faire bonne mesure. Nous avons récemment publié un wrapper jQuery pour la bibliothèque qui facilite encore plus la création et la personnalisation des graphiques. Les liens CDN sont dans la démo ci-dessous.

Je fais partie de l'équipe ZingChart et nous sommes là pour répondre à toutes les questions que vous pourriez avoir!

Afficher l'extrait de code

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

Développer l'extrait

RockinSocks
la source

4

Quelques autres qui n'ont pas été mentionnés:

Pour les mini tartes, lignes et barres, Peity est brillant, simple, minuscule, rapide, utilise un balisage vraiment élégant.

Je ne suis pas sûr de sa relation avec Flot (étant donné son nom), mais Flotr2 est plutôt bon, fait certainement de meilleures tartes que Flot.

Bluff produit de jolis graphiques linéaires, mais j'ai eu un peu de mal avec ses tartes.

Pas ce que je cherchais, mais un autre produit commercial (un peu comme Highcharts) est TeeChart .

Synchro
la source

4

Chart.js est très utile, prenant également en charge de nombreux autres types de graphiques.

Il peut être utilisé à la fois avec jQuery et sans.

Diamant Python
la source

1

Excellente bibliothèque de camembert. J'utilise charts.js pour les camemberts et morris.js pour tout le reste. morris.js est fantastique, à part ces stupides graphiques f! & * # donut. Quand je veux un graphique à secteurs sans af! ^ & * @ Trou de beignet, je ne cherche pas plus loin que charts.js. Charts.js est probablement une excellente solution pour d'autres types de graphiques également, mais vous ne pouvez tout simplement pas battre l'API intentionnellement incroyablement facile à utiliser de morris.js

chiliNUT

3

Il y a un nouveau joueur dans le domaine, offrant des cartes de navigation avancées qui utilisent Canvas pour des animations et des performances ultra-fluides:

https://zoomcharts.com/

Exemple de graphiques:

Documentation: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

Ce qui est cool avec cette lib:

D'autres tranches peuvent être développées
Pie propose une analyse descendante des structures hiérarchiques (voir exemple)
écrivez facilement votre propre contrôleur de source de données ou fournissez un simple fichier json
exporter des images haute résolution hors de la boîte
prise en charge tactile complète , fonctionne sans problème sur iPad, iPhone, Android, etc.

Les graphiques sont gratuits pour une utilisation non commerciale, des licences commerciales et un support technique sont également disponibles.

Des graphiques temporels et des graphiques nets interactifs sont également à votre disposition.

Les graphiques sont livrés avec une API et des paramètres étendus, vous permettant de contrôler tous les aspects des graphiques.

jancha
la source

Que voulez-vous dire? Nous avons déjà une fonction de recadrage d'image intégrée.

jancha

0

Vérifiez TeeChart pour Javascript

Gratuit pour un usage non commercial.
Comprend des plugins pour jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...
Démos interactives ici et ici .
Quelques captures d'écran de certaines des démos:

Yeray
la source

Graphique à secteurs avec jQuery

Réponses: