javascript - Javascript 或 jQuery Flot 中的仪表图

Question

我试图得到一个看起来像仪表的图表。

我已经在我的其他图表中使用 jQuery Flot，那么是否可以使用 Flot 或纯 Javascript？有人可以帮我开始编码吗？

Answer 1

这里只使用基础flot和背景图像：

// 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>

在这里拉小提琴。

Answer 2

这类似于Visualize energy efficiency level，只是无法使用 Flot 的基本选项来实现。

正如我在对该问题的回答中所建议的那样，您将需要创建一个覆盖 drawBackground、drawSeries 和可能绘制的插件。

Answer 3

你可以试试 jqChart 的径向量规。它具有您需要的功能： http ://www.jqchart.com/jquery/gauges/RadialGauge/Scale

免责声明：我为 jqChart 工作。