jQuery Girl
  1. jQuery Girl
  3. Tableau de jauge en Javascript ou jQuery Flot
Intereting Posts
Fonction de clic jQuery vs inline onclick Alternative pour la fonction “$ (document) .ready” Générer un fichier avec ajax et permettre à l’utilisateur de le télécharger? : nième enfant ne fonctionne pas dans IE Est-il possible d’utiliser `event.preventDefault ()` avec un élément `select` avec jQuery? jQuery UI Draggable: mettre à jour le confinement lors d’un événement glisser La taille de l’image avant est dans DOM Conversion du tableau de chaînes en object Nom / Valeur en javascript Rails 3.1 – CSRF ignoré? Comment sortinger uniquement la page en cours à l’aide de Jquery Datatable Ajout d’un nombre aléatoire après l’URL Comment organiser le prochain AJAX? jQuery: élimine la “pause” à l’écran blanc entre les animations Comment obtenir un object XMLHTTPRequest pur dans jQuery 1.5? le script doit être appelé pour «onload» et pas seulement pour «flou»

Tableau de jauge en Javascript ou jQuery Flot

J’essaie d’obtenir un graphique qui ressemble à une jauge.

J’utilise déjà jQuery Flot pour mes autres graphiques, est-il possible d’utiliser Flot ou Javascript? Quelqu’un peut-il m’aider à commencer à coder cela?

Ici, il n’utilise que la base flot et une image d’arrière-plan: 

 // consts var minCord = {x: -60, y: -57}; var maxCord = {x: 60, y: -60}; var radius = 90; $(function() { // some calculations var startAngle = (6.2831 + Math.atan2(minCord.y, minCord.x)); var endAngle = Math.atan2(maxCord.y, maxCord.x); var degreesSweep = (-endAngle) + startAngle; var positionOnArc = function(magnitude){ var numDegrees = degreesSweep * (magnitude/100.0); var angle = (startAngle - numDegrees); var posX = radius * Math.cos(angle); var posY = radius * Math.sin(angle); return [posX, posY]; } var options = { xaxis: { min: -100, max: 100, show: false }, yaxis: { min: -100, max: 100, show: false }, grid: { show: false } }; updatePlot = function(){ var data = [[0,0],positionOnArc(Math.random() * 100)]; $('#placeholder').plot([data], options); setTimeout(updatePlot, 1000); } updatePlot(); }); 
 #placeholder { background-image:url('http://soffr.miximages.com/javascript/gauge-md.png'); width: 300px; height: 300px; }

Ceci est similaire au niveau d’efficacité énergétique Visualize , à la différence qu’il est impossible de le faire à l’aide des options de base de Flot.

Comme suggéré dans ma réponse à cette question, vous devrez créer un plug-in qui remplace drawBackground, drawSeries et éventuellement draw.

Vous pouvez essayer la jauge radiale de jqChart. Il a les fonctionnalités dont vous avez besoin: http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

Disclaimer: Je travaille pour jqChart.