English
资源说明：A population pyramid plugin for flot
The `flot.pyramid` plugin will process the data as follows (given we want to plot the bars representing women values to the left):
1. Extract the data labels (`0-20`, `20-40`, and `40+`) and use them as
the Y axis tick labels
2. Add a custom X axis formatter, so the negative values are shown as
positive
3. Flip the women related data, so `flot` is actually plotting `-900`,
`-1150`, and `-1000`. The original series data is left untouched.
The "flip" only affects the datapoints used internally by `flot`.
And that's it!
Usage instructions
------------------
In order to use the plugin you need to download `src/jquery.flot.pyramid.js` and add a script tag to your page loading that file (remember that this is a `flot` plugin, so you will also need to add `jquery` and `flot` itself). The following code is extracted from the `example.html` file in this project:
### Plot configuration options
You can pass flot the following configuration options when using the `pyramid` plugin:
* `series.pyramid`
* `show`: when set to `true` it will activate the plugin... so do not forget it!
* `barsWidth`: the width of each bar in the pyramid. Default is 0.6
In order to draw a population pyramid chart, call `plot` with the following configuration object:
var flot_options = {
series: {
pyramid: {
show: true,
barsWidth: 0.5 // defaults to 0.1 if omitted
}
}
};
var series = { ... } // see below for info on series definition and configuration
$.plot($('#pyramid_container'), series, flot_options);
### Data series configuration
#### Number of series
Currently, you can only plot two data series in the same graph. Plotting more than two series has not even been tested :P
#### Data groups labeling
You can use textual labels representing each of the groups the data is split in, providing an array of `label`, `value` pairs as the series data (see example below).
#### Bars direction
The plotting direction can be specified for each series. You can use `L`
or `W` for left (the "negative part of the X axis) and `R` or `E` for
right (the positive part. This is the default when you do not specify a direction).
#### Series configuration example
This code shows an example series data object:
var flot_options = { ... } // see above for info on plot configuration options
var series = [
{
label: 'Men', // the series label
data: [ ['0-4',1302329], ['5-9',2328460], ['10-14',1090872], ['15-19',1158983], ... ]
},
{
label: 'Women', // the series label
data: [ ['0-4',1224757], ['5-9',1129454], ['10-14',1030163], ['15-19',1084773], ... ],
pyramid: {
direction: 'L' // Women bars will grow towards the left
}
}
];
$.plot($('#pyramid_container'), series, flot_options);
flot.pyramid ============ This is a plugin for drawing [population pyramids](http://en.wikipedia.org/wiki/Population_pyramid) with [flot](http://code.google.com/p/flot/). This is a very simple (too simple, I fear) approach to population pyramid plotting, but it works for me. It uses horizontal bars and does some data preprocessing in order to extract the Y axis labels and flip one of the series, so it is drawn in the negative region of the X axis. The labels in the X axis are formatted so we do not get negative values. **WARNING** the plugin has some basic tests which test (yeah, that is redundant) that the minimum requirements are met (i.e. to plot a horizontal, side-by-side bar graph, with the right X and Y axis tick labels), but the integration with other flot plugins and/or with some of the generic flot options **still has to be tested**. Cuidadín, pues. Step by step explanation ------------------------ Supose you want to plot the two following (fictional and meaningless) data using a population pyramid wich shows the men data against the women data:
| Age group | Men | Women |
|---|---|---|
| 0-20 | 1000 | 900 |
| 20-40 | 300 | 1150 |
| 40+ | 200 | 1000 |
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
