0

I want to create something like this:

Imgur

The black line represents a specific value.

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.

4

2 回答 2

3

我花了一些时间部分基于上述@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'
    }
});

工作小提琴

结果:

在此处输入图像描述

于 2013-09-26T01:40:18.333 回答
3

你可以很容易地做到这一点,方法是提供仪表作为背景图像(手动或通过图像插件),关闭 x 和 y 轴,然后使用标记画线。

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

查看文档的Hooks部分,了解有关其工作原理的更多信息。

于 2013-09-24T12:46:27.553 回答