可视化能源效率水平

Question

我想创造出这样的东西：

​

​

黑线表示特定的值。

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

Answer 1

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

首先，我创建了一个像上面这样的渐变背景图像(请原谅我可怜的瘸子技能)。然后，我将其设置为我的位置持有者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 (绘制直线)以及可能的绘制(覆盖轴)提供钩子。关于一个替代Flot默认轴的插件的例子，请看一下flot-挠痒痒转子。

请查看文档的钩子部分，以获得更多关于此操作的信息。