可视化能效水平 [英] Visualize energy efficiency level

问题描述

我想创建这样的东西：

黑线代表一个特定值。

我需要在phonegap-我使用jQuery-mobile和 Flotcharts 一些其他的东西。
什么是最简单的方法？ Flotcharts 似乎不适合这种图表。

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.

推荐答案

花了一些时间实现这部分基于@ DNS的建议上面。

I took a few moments to implement this based in part on @DNS's suggestions above. I did it without using any plugins, just straight flot magic.

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

First, I created a gradient background image like the one above (excuse my poor gimp skills). I then set that to the background of my place holder div. Then I configured flot's grid options to push the xaxis labels up to the center of my div. Finally I "plotted" a straight line.

$.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'
    }
});

工作小提琴。

结果：

这篇关于可视化能效水平的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！