Passer en langue française Switch to english

Izzyway

JS Graph

Introduction

JS Graph est une api javascript pour créer des graphiques.

Licence

Cet api est sous licence Apache 2.0.

Git repository

Disponible sur GitHub: https://github.com/izzyway/izzychart

Documentation

Constructeur

ConstructeurParamètresDescription
IzzyChartnoneCréer l'objet Chart

Méthodes

MéthodeParamètresDescription
addSeriesdata - JSONArray of JSONArrayAjouter un graphique.
Exemple: addSeries([[1,2], [3,4]]);
drawid - String
config - JSONObject (optionel)
Dessine le graphique dans l'element html dont l'id est donnée

Le JSONObject de configuration

Option TypeValue par défautDescription
debugBooleanfalsePasser en mode debug (affiche des messages dans la console)
titleStringEmptyTitre du graphique
widthNumber800Largeur du graphique
heightNumber600Hauteur dy graphique
borderJSONObjectDefinition de la bordure du graphique
border.widthNumber4Largeur de la bordure
border.colorStringblackCouleur de la bordure
border.displayStringsolidAffichage de la bordure (valeurs acceptées: solid, none)
border.cornerStringsquareDefinition des coins de la bordure (valeurs acceptées: square, rounded)
gridXJSONObjectDéfinition des lignes verticales
gridX.widthNumber1LArgeur des lignes
gridX.colorStringlightgrayCouleur des lignes
gridX.displayStringdottedAffichage des lignes (valeurs acceptées: solid, dotted, none)
gridX.scaleString / NumberautoDéfinition de l'interval
gridYJSONObjectDéfinition des lignes horizontales
gridY.widthNumber1Largeur des lignes
gridY.colorStringlightgrayCouleur des lignes
gridY.displayStringdottedAffichage des lignes (valeurs acceptées: solid, dotted, none)
gridY.scaleString / NumberautoDéfinitions de l'interval
axisXJSONObjectDéfinition de l'axe vertical
axisX.widthNumber1Largeur de l'axe
axisX.colorStringdarkgrayCouleur de l'axe
axisX.displayStringdottedAffichage de l'axe (valeurs acceptées: solid, dotted, none)
axisX.scaleString / NumberautoDéfinition de l'interval
axisX.labelJSONObectDéfinition du texte
axisX.label.fontStringVerdanaFont
axisX.label.sizeNumber10Taille du texte
axisX.label.colorStringblackCouleur du texte
axisX.label.formatString#.##Format du texte (ie: #,# or #.###)
axisYJSONObjectDéfinition de l'axe horizontal
axisY.widthNumber1Largeur de l'axe
axisY.colorStringdarkgrayCouleur de l'axe
axisY.displayStringdottedAffichage de l'axe (valeurs acceptées: solid, dotted, none)
axisY.scaleString / NumberautoDéfinition de l'interval
axisY.labelJSONObectDéfinition du texte de l'axe
axisY.label.fontStringVerdanaDéfinition de la font du texte de l'axe
axisY.label.sizeNumber10Taille du texte
axisY.label.colorStringblackCouleur du texte
axisY.label.formatString#.##Format du texte (ie: #,# or #.###)
legendJSONObjectDéfinition de la légende
legend.positionStringtop rightDéfinition de la position de la légende (valeurs acceptées: top, bottom, right, left, none)
legend.backgroundStringwhiteDéfinition de la couleur d'arrière plan de la légende
legend.borderJSONObjectDéfinition de la bordure de la légende
legend.border.colorStringblackDéfinition de la couleur de la bordure de la légende
legend.border.widthNumber1Définition de la largeur de la bordure de la légende
legend.labelJSONObjectDéfinition du texte de la légende
legend.label.fontStringVerdanaDéfinition de la font de la légende
legend.label.sizeNumber10Définition de la taille du texte de la légende
legend.label.colorStringblackDéfinition de la couleur du texte de la légende
seriesJSONArrayDéfinition des paramètres du graphique
series[x].colorStringCouleur du graphique
series[x].sizeNumber2Taille du graphique
series[x].displayStringcurvedAffichage du graphique (valeurs acceptées: curved, line)
series[x].typeStringlineType du graphique (valeurs acceptées: bar, line)

Demo 1



<div id = "izzychart">
</div>

Demo 2



<div id = "izzychart2">
</div>