基于HTML5 SVG的跨设备jQuery图表插件

svg 图表 2015-11-24

控件介绍
pizza.js是一款基于HTML5 SVG的跨设备的jQuery图表插件。该图表插件可以制作饼状图、圆环图、柱状图和线性图。因为它是基于SVG生成的图表,所以在任何设备中都不会失真。
浏览器兼容

支持IE9+

演示下载 2340
使用方法

使用方法

使用该jQuery图表插件需要引入jQuery、snap.svg.js、jquery.pizza.js和pizza.css文件。

1
2
3
4
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/vendor/snap.svg.js"></script>
<script src="js/jquery.pizza.js"></script>
HTML结构

pizza.js图表可以分为饼状图、柱状图和线性图,它们的HTML结构基本类似。

饼状图的HTML结构如下:使用一个无序列表,每一个列表项都有一个data-value值,代表所占的百分比。

1
2
3
4
5
6
7
8
9
<ul data-pie-id="my-cool-pie-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-pie-chart"></div>               

柱状图的HTML结构如下:

1
2
3
4
5
6
7
8
9
10
<ul data-bar-id="my-cool-bar-chart">
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-bar-chart"></div>
                

线性图的HTML结构如下:

1
2
3
4
5
6
7
8
9
<ul data-pie-id="my-cool-line-graph">
  <li data-x="36" data-y="1">Pepperoni</li>
  <li data-x="14" data-y="2">Sausage</li>
  <li data-x="8" data-y="3">Cheese</li>
  <li data-x="11" data-y="4">Mushrooms</li>
  <li data-x="7" data-y="5">Chicken</li>
  <li data-x="24" data-y="6">Other</li>
</ul>
<div id="my-cool-line-graph"></div>               

在各种图表的无序列表之后都有一个<div>元素,它们通过id和无序列表的data-pie-id属性关联,这是实际生成图表的地方。

SASS

该图表插件使用SASS来编写统一样式。如果你不使用SASS,也可以使用其它的方式。

下面是一些SASS变量:

1
2
//Base color for the charts
$pie-color: $primary-color;               

$pie-color用于设置图表的颜色,上面的例子使用的是Foundation的$primary-color颜色,你可以更换为其它十六进制的颜色。

另外还有2个Sass mixins可以设置图表的主题。你只需要引入其中一个。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@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来调整图表的颜色。

1
2
3
4
5
6
7
8
9
10
11
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样式之后,你可以通过下面的方式来初始化该图表插件:

1
Pizza.init();               

图表会在改变尺寸的时候自动进行更新,如果你改变了图表中的值,或在页面中添加了新的图表,可以再次允许初始化方法来重新加载它。

你也可以在初始化的时候为图表传入初始化数据。

1
2
3
Pizza.init('#example1', {
  data: [23, 43, 17, 7, 11]
});               

可以通过第二个参数来修改图表的参数设置:

1
Pizza.init(document.body, {border-size: 0});               

也可以直接在HTML元素上进行设置:

1
2
3
4
5
6
7
8
9
<ul data-pie-id="my-cool-chart" data-options='{"donut": "true"}'>
  <li data-value="36">Pepperoni</li>
  <li data-value="14">Sausage</li>
  <li data-value="8">Cheese</li>
  <li data-value="11">Mushrooms</li>
  <li data-value="7">Chicken</li>
  <li data-value="24">Other</li>
</ul>
<div id="my-cool-chart"></div>               

配置参数

该jQuery图表插件可用的配置参数如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  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,
}

本文转载请注明出处:http://www.zhuiye.com/detail_39.html
评论区
  • 还没有评论,快来抢沙发吧!