javascript - 可视化能源效率水平

我想创建这样的东西：



黑线表示特定值。

我需要在phonegap-app中实现此可视化。我正在使用jQuery-mobile和Flotcharts进行其他操作。
最简单的方法是什么？ Flotcharts似乎不适用于此类图表。

最佳答案

我花了一些时间来实现此功能，部分是基于上面@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。

结果：

关于javascript - 可视化能源效率水平，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18976588/