javascript - Visualize energy efficiency level

Question

I want to create something like this:

The black line represents a specific value.

I need this visualization within a phonegap-app. I'm using jQuery-mobile and Flotcharts for some other stuff. What would be the simplest way to go? Flotcharts does not seem right for this kind of chart.

Answer 1

我花了一些时间部分基于上述@DNS 的建议来实现这一点。我没有使用任何插件就做到了，只是直接使用魔法。

首先，我创建了一个像上面那样的渐变背景图像（请原谅我的 gimp 技能不佳）。然后我将其设置为占位符 div 的背景。然后我配置了 flot 的网格选项以将 xaxis 标签推到我的 div 的中心。最后我“绘制”了一条直线。

$.plot("#placeholder", [ 
    {data: [[260,0],[260,100]], color: 'black', lines: {lineWidth:4}} 
],{
    yaxis:{
        show: false
    },
    xaxis:{
        min: 0,
        max: 400
    },
    grid: {
        show: true,
        borderWidth: 0,
        margin: {bottom: 90},
        labelMargin: -90,
        color: 'white'
    }
});

工作小提琴。

结果：

Answer 2

你可以很容易地做到这一点，方法是提供仪表作为背景图像（手动或通过图像插件），关闭 x 和 y 轴，然后使用标记画线。

如果这不起作用，您需要将其编写为插件。这将涉及为drawBackground（绘制渐变条）、drawSeries（绘制线条）和可能的draw（覆盖轴）提供钩子。有关替换 Flot 默认轴的插件示例，请查看flot-tickrotor。

查看文档的Hooks部分，了解有关其工作原理的更多信息。