元素,它们通过id和无序列表的data-pie-id属性关联,这是实际生成图表的地方。
#### SASS
该图表插件使用SASS来编写统一样式。如果你不使用SASS,也可以使用其它的方式。
下面是一些SASS变量:
```html
//Base color for the charts
$pie-color: $primary-color;
```
$pie-color用于设置图表的颜色,上面的例子使用的是Foundation的$primary-color颜色,你可以更换为其它十六进制的颜色。
另外还有2个Sass mixins可以设置图表的主题。你只需要引入其中一个。
```html
@mixin darkened-children($num-children, $color) {
@for $i from 1 through $num-children {
$color: scale-color($color, $lightness: -10%);
& > *:nth-child(#{$num-children}n+#{$i}) {
color: $color;
}
}
}
@mixin lightened-children($num-children, $color) {
@for $i from 1 through $num-children {
$color: scale-color($color, $lightness: 10%);
& > *:nth-child(#{$num-children}n+#{$i}) {
color: $color;
}
}
}
```
#### CSS
如果你不使用SASS,可以通过CSS来调整图表的颜色。
```html
ul[data-pie-id] li:nth-child(1) {
color: red;
}
ul[data-pie-id] li:nth-child(2) {
color: red;
}
ul[data-pie-id] li:nth-child(3) {
color: yellow;
}
```
#### JavaScript
在完成了HTML标签和CSS样式之后,你可以通过下面的方式来初始化该图表插件:
```html
Pizza.init();
```
图表会在改变尺寸的时候自动进行更新,如果你改变了图表中的值,或在页面中添加了新的图表,可以再次允许初始化方法来重新加载它。
你也可以在初始化的时候为图表传入初始化数据。
```html
Pizza.init('#example1', {
data: [23, 43, 17, 7, 11]
});
```
可以通过第二个参数来修改图表的参数设置:
```html
Pizza.init(document.body, {border-size: 0});
```
也可以直接在HTML元素上进行设置:
```html
- Pepperoni
- Sausage
- Cheese
- Mushrooms
- Chicken
- Other
```
配置参数
该jQuery图表插件可用的配置参数如下:
```html
{
donut: false,
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 30, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
show_grid: true,
bar_spacer: 100,
bar_intervals: 6,
animation_type: 'elastic' // options: backin, backout, bounce, easein,
}
```