Bar charts documentation
Read comments...
Example
<script> // Some data that is to be shown on the bar chart. To show a stacked or grouped chart // each number should be an array of further numbers instead (as below). var data = [280,45,133]; // An example of the data used by stacked and grouped charts // var data = [[1,5,6], [4,5,3], [7,8,9]] var bar = new RGraph.Bar({ id: 'cvs', data: data, options: { labels: ['Richard', 'Alex', 'Nick'], gutterLeft: 45, backgroundBarcolor1: 'white', backgroundBarcolor2: 'white', backgroundGrid: true, colors: ['red'] } }).draw(); </script>
Properties属性
You can use these properties to control how the chart apears. You can set them by including them in the options section of the configuration as above.
应用这些属性来控制图表的显示。在options中设置它们。
- Background
- Axes properties
- Colors
- Margins
- Labels and text
- Titles
- Shadow
- Scale
- Key
- Interactive features
- Zoom
- Events
- Miscellaneous
Background
backgroundBarcolor1The color of the background bars, (1 of 2).
Default: white
backgroundBarcolor2
The color of the background bars, (2 of 2).
Default: white
backgroundGrid
Whether to show the background grid or not.
Default: true
backgroundGridColor
The color of the background grid.
Default: #ddd
backgroundGridHsize
The horizontal background grid size.
Default: 40
backgroundGridVsize
The vertical background grid size.
Default: 18
backgroundGridWidth
The width that the background grid lines are. Decimals (eg 0.5) are permitted.
Default: 1
backgroundGridBorder
Determines whether a border line is drawn around the grid.
Default: true
backgroundGridHlines
Determines whether to draw the horizontal grid lines.
Default: true
backgroundGridVlines
Determines whether to draw the vertical grid lines.
Default: true
backgroundGridAutofit
Instead of specifying a pixel width/height for the background grid, you can use autofit and specify how many horizontal and vertical lines you want.
Default: true
backgroundGridAutofitNumhlines
When using autofit this allows you to specify how many horizontal grid lines you want.
Default: 5
backgroundGridAutofitNumvlines
When using autofit this allows you to specify how many vertical grid lines you want.
Default: 20
backgroundGridAutofitAlign
If you want to have your grid lines line up with the labels (both X and Y axes), you can set this to true and RGraph will attempt to make the grid lines line up. If you have a hmargin set then the alignment will be thrown out.
Default: false
backgroundGridDotted
If you want to have your background grid dashed then set this to true.
Default: false
backgroundGridDashed
If you want to have your background grid dotted then set this to true. This takes precedence over dashed lines.
Default: false
backgroundHbars
An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: myBar.set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]); This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.
Default: null
backgroundImage
If you want to specify a background image to use on your chart, specify it with this property. If you use effects with a background image on your chart it may make the effect flicker. Using a background image with the ondraw event may mean that the event fires twice. There is a property that you can check though that is set when the image has loaded: obj.__rgraph_background_image_loaded__ Simply check this flag in your ondraw event. If it's true then the background image has loaded.
Default: null
backgroundImageStretch
By default your background image is stretched (if necessary) to cover the whole chart area (gutters not included). If this is not what you want then set this property to false.
Default: true
backgroundImageX
The X position of the image. The coordinates are the top left corner of the image.
Default: null
backgroundImageY
The Y position of the image. The coordinates are the top left corner of the image.
Default: null
backgroundImageW
The width of the image. If you have a large canvas with many charts - you may need to specify this.
Default: null
backgroundImageH
The height of the image. If you have a large canvas with many charts - you may need to specify this.
Default: null
backgroundImageAlign
Instead of specifying the coordinates of the image, you can instead simply align it top, bottom, left or right. Examples are:
- top left
- bottom right
- bottom
- right
Default: null
backgroundImageAlpha
The alpha value (the opacity) of the image.
Default: 1
backgroundColor
If you want to