JavaScript或jQuery Flot中的量表图表 [英] Gauge chart in Javascript or jQuery Flot

问题描述

我已经使用jQuery Flot作为我的其他图表，所以可以使用Flot或者普通Javascript？

解决方案

这里只使用base flot 和背景图片：

  // constsvar minCord = { x：-60，y：-57}; var maxCord = {x：60，y：-60}; var radius = 90; $（function（）{//一些计算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 *幅度/ 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://www.clker.com/cliparts/6/Z/q/9/9/D/gauge-md.png'）; width：300px; height：300px;}  

 < script src = ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/ libs / flot / 0.8.1 / jquery.flot.min.js>< / script>< div id =placeholder>< / div>  

小提琴 here 。

I'm trying to get a graph that looks like a gauge.

I am already using jQuery Flot for my other charts, so is it possible using Flot or plain Javascript? Can someone help me getting started coding this?

解决方案

Here it is only using base flot and a background image:

// 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://www.clker.com/cliparts/6/Z/q/9/9/D/gauge-md.png');
    width: 300px;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.1/jquery.flot.min.js"></script>
<div id="placeholder"></div>

Fiddle here.

这篇关于JavaScript或jQuery Flot中的量表图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！