Visualize energy efficiency level

问题

I want to create something like this:

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.

回答1:

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.

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

Working fiddle.

Result:

回答2:

You can probably do this quite easily by providing the gauge as a background image (either manually or via the image plugin), turning off the x and y axes, then using markings to draw the line.

If that doesn't work, you'd need to write it as a plugin. That would involve providing hooks for drawBackground (to draw the gradient bar), drawSeries (to draw the line), and possibly draw (to override the axes). For an example of a plugin that replaces Flot's default axes, take a look at flot-tickrotor.

Take a look at the Hooks section of the docs for more info on how this works.

来源：https://stackoverflow.com/questions/18976588/visualize-energy-efficiency-level