javascript - 可视化能源效率水平

Question

我想创建这样的东西:

黑线代表特定值。

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

Answer 1

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

首先，我创建了一个像上面的渐变背景图像(请原谅我糟糕的 gimp 技能)。然后我将其设置为占位符 div 的背景。然后我配置了 float 的网格选项，将 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 .

结果: