Javascript或jQuery Flot中的仪表图[关闭]答案

【问题标题】：Gauge chart in Javascript or jQuery Flot [closed]Javascript或jQuery Flot中的仪表图[关闭]
【发布时间】：2013-10-16 07:20:54
【问题描述】：

我正在尝试获得一个看起来像仪表的图表。

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

【问题讨论】：

已编辑的问题看起来不错。提供的解决方案非常出色且最有价值。请考虑撤销关闭此问题的决定。

标签： javascript jquery charts flot

【解决方案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>

小提琴here.

【讨论】：

你太棒了，我正在努力，但我没有接近这个。我想知道我是否可以将我粘贴的图像用于背景和针，尤其是针。谢谢。
@user2818666，针是series 行。复制它的外观并不难。你有上面没有针的图片吗？
谢谢，我正在准备。我会在几分钟内更新这个问题。这就是我想做的。指针应根据数据中的值指向某个角度。如果可能的话，在指向值之前，指针是否可以旋转，看起来像是在测量，然后停留在一个点上。谢谢
这太棒了，谢谢你的例子！伟大的工作马克！
@Mark 我正在尝试使用我自己的图像作为指针和仪表，但我无法使其正常工作。你能帮忙吗？

【解决方案2】：

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

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

【讨论】：

我在想不使用 Flot 是否容易做到这一点。你怎么看？
@DNS，我会把它当作挑战，我相信基本选项 flot 可以做任何事情:)
@DNS 看起来很复杂，但我正在努力，谢谢
@DNS，我今天下午找到了一些时间......我在想也许我们应该在 flot 示例页面上获得一个“Gauge and Meter”页面。
我根据您的回答创建了一个示例页面，下周我会将它们变成 0.9-work 中的适当插件。我有你的许可吗？我可以用你的全名把它们记给你吗？

【解决方案3】：

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

免责声明：我为 jqChart 工作。

【讨论】：

谢谢，但它不是开源的