可视化能效水平

Question

我想创建这样的东西：

黑线表示特定值。

我需要在phonegap-app中进行此可视化。我正在使用jQuery-mobile和Flotcharts来处理其他一些事情。 什么是最简单的方法？ Flotcharts似乎不适合这种图表。

Answer 1

您可以通过将仪表作为背景图像（手动或通过image plugin），关闭x和y轴，然后使用markings绘制线条，轻松地完成此操作

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

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

Answer 2

我花了一些时间来实现这一点，部分基于@ 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'
    }
});

工作fiddle。

结果：