RGraph 系列文章（三）：条状图文档

最新推荐文章于 2021-06-04 16:28:02 发布

bluestorm80

最新推荐文章于 2021-06-04 16:28:02 发布

阅读量739

点赞数

本文链接：https://blog.csdn.net/bluestorm80/article/details/54879510

版权

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

backgroundBarcolor1
The 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: