high chart sample | 易学教程

问题

looking for high chart sample program, I haven't used Highcharts before, but it seems there are no sliders built take a look at the answer.

Actually Highcharts in general are not free.. For me it's simple bullet graph. In Highcharts for that you can use bar chart with scatter point

回答1:

The bullet concept will work for this, though it will take some work to get styling like that. There are plenty of useful options for styling such a chart though without relying on the physical gauge metaphor.

A quick variation on the bullet chart approach that puts them into a single chart and removes the banding:

http://jsfiddle.net/jlbriggs/kwtZr/41/

It relies on a custom extension to produce the 'line' marker type:

Highcharts.Renderer.prototype.symbols.line = ...

{{

edit in response to comments below:

updated example with some additional formatting options and clean up:

http://jsfiddle.net/jlbriggs/kwtZr/55/

be wary of using multiple colors unless the colors truly mean something.
Using additional color to highlight items that require attention is a good use of color.

Using color to highlight every possible status of something (shades of green, fading to shades of yellow, fading to shades of red...), is a bad use of color that is sadly over used and even expected by some.

FWIW

Also important to reiterate that the purpose of this type of display is very well handled by a bullet chart, which is definitely worth looking into migrating to somewhere along the way. Reference:

http://www.perceptualedge.com/articles/misc/Bullet_Graph_Design_Spec.pdf
http://en.wikipedia.org/wiki/Bullet_graph

来源：https://stackoverflow.com/questions/17564548/high-chart-sample

标签

Highcharts