JavaScript或jQuery Flot中的计量表图表

Question

我想要制作一个类似仪表盘的图表。

我的其他图表已经使用了jQuery Flot，所以是否可以使用Flot或纯Javascript来实现呢？有人可以帮我入门并开始编写吗？

- user2818666

---

编辑后的问题看起来很不错。提供的解决方案非常出色且具有很高的价值。请考虑撤销关闭此问题的决定。 - EGL 2-101

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>

在这里试用Fiddle。

- Mark

---

你很棒，我正在努力，但是我还没有接近这个水平。我想知道我能否使用我在问题中粘贴的图像作为背景和指针，特别是指针。谢谢。 - user2818666

@user2818666，这个指针是一个“series”线。复制它的外观并不难。你有没有不带指针的上面那张图片？ - Mark

谢谢，我正在准备。我会在几分钟内更新问题。这是我想做的事情。指针应该根据数据中的值指向某个角度。如果可能，在指向该值之前，指针是否可以旋转，看起来像在测量，然后停留在一个点上。谢谢。 - user2818666

太棒了，感谢示例！马克做得很好！ - Blake

@Mark，我正在尝试使用自己的图像作为指针和仪表盘，但是我无法使其正常工作。你能帮忙吗？ - user2818666

@user2818666，请在你的问题中更新你的图片和期望的样式，我会尽力帮助你。 - Mark

Answer 2

这与可视化能效等级类似，但是没有使用Flot的基本选项的方法。

如我在那个问题的答案中所建议的，您需要创建一个插件来覆盖drawBackground、drawSeries和可能的draw。

- DNS

---

@DNS，我将这视为一项挑战，我相信基本选项flot可以做任何事情 :) - Mark

@DNS 看起来非常复杂，但是我正在努力理解，谢谢。 - user2818666

@Mark 我在上一条评论中忘记提到你了，关于示例页面；你看到了吗？ - DNS

@DNS，我现在看到了 :) 是的，你有权限。如果你愿意，我不介意尝试创建插件。背景图片来自这里：http://www.clker.com/clipart-gauge-for-temperature-2-1.html，并声明它是公共领域。 - Mark

@DNS 这个插件已经是稳定版本了吗？谢谢。 - user2818666

Answer 3

你可以尝试使用 jqChart 的径向仪表盘。它具有你所需要的功能：

http://www.jqchart.com/jquery/gauges/RadialGauge/Scale

免责声明：我是 jqChart 的员工。

- Maxim Milev

---

谢谢，但它不是开源的。 - user2818666