Camembert avec jQuery

Question

Je souhaite créer un graphique à secteurs en JavaScript. En cherchant j'ai trouvé l'API Google Charts. Étant donné que nous utilisons jQuery, j’ai constaté que l’intégration pour Google Charts était disponible.

Mais mon problème est que les données réelles sont envoyées au serveur Google pour la création des 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.

Answer 1

jqPlot est plutôt joli et il est open source.

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

Answer 2

Flot

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

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

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

Fonction Flot Zoom.

De plus, vous avez également la possibilité de sélectionner une partie du graphique pour récupérer les 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 effectuer un zoom avant pour voir les points de données un peu plus près. Très cool .

Lignes de sparkline

Limitations: camembert, ligne, barre, combinaison

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

Graphique de requête 0.21

Limitations: surface, ligne, barre et combinaisons de celles-ci

jQuery Chart 0.21 n’est pas le plus beau plugin de cartographie à ce jour, il faut le dire. Les fonctionnalités qu’il prend en charge sont assez basiques, mais elles peuvent être flexibles 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 un cas é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 la configuration de CSS est correcte, mais il existe de meilleures solutions.

TufteGraph

Limitations: barre et barre empilée

Tuftegraph se vend comme «de jolis graphiques à barres que vous montriez à votre mère». Ca se rapproche, Flot est plus joli, mais Tufte se prête bien à être très léger. Bien que cela soit assorti de restrictions, il existe peu d'options parmi lesquelles choisir, de sorte que vous obtenez ce que vous recevez. Découvrez-le pour un diagramme à barres gagnant rapide.

Answer 3

Des tonnes de suggestions intéressantes dans ce cas, il suffit de jeter ZingChart pour une bonne mesure. Nous avons récemment publié un encapsuleur jQuery pour la bibliothèque qui facilite encore la création. et personnaliser les 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 à vos questions!

$('#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>

Answer 4

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

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

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

Bluff produit de jolis graphes linéaires, mais j'ai eu quelques problèmes avec ses tartes.

Ce n'est pas ce que je cherchais, mais un autre produit commercial (un peu comme Highcharts) est TeeChart .

Answer 5

Il y a un nouvel acteur sur le terrain, proposant des cartes de navigation avancées qui utilisent Canvas pour des animations et des performances super fluides:

https://zoomcharts.com/

Exemple de graphique:

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

Qu'est-ce qui est cool dans cette librairie:

• D'autres tranches peuvent être développées
• Pie propose une analyse détaillée des structures hiérarchiques (voir l'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
• support complet touch , fonctionne sans problème sur iPad, iPhone, Android, etc.

Les

cartes sont gratuites pour un usage non commercial, des licences commerciales et une assistance technique sont également disponibles.

Des tableaux de bord interactifs et des graphiques en réseau sont également à votre disposition.

Les graphiques sont fournis avec une API et des paramètres étendus, ce qui vous permet de contrôler tous les aspects des graphiques.

Answer 6

Chart.js est très utile car il prend en charge de nombreux autres types de graphiques.

Il peut être utilisé avec jQuery et sans.

Answer 7

Vérifiez TeeChart pour Javascript

• Gratuit pour un usage non commercial.

• Inclut les plugins pour jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...

• Démonstrations interactives ici et ici .

• Quelques captures d'écran de certaines des démos: