您现在的位置:龙卷风首页 ›› 前端设计 ›› 阅读文章

纯css实现的统计图表代码8则

用css实现统计图表?看看实际例子吧!

来源:http://sixrevisions.com/css/css_techniques_charting_data/

1. CSS for Bar Graphs

CSS for Bar Graphs

View Demo

2. Accessible Data Visualization with Web Standards

Accessible Data Visualization with Web Standards - screen shot.

View Demo #1View Demo #2View Demo #3

Author Wilson Miner

3. CSS Vertical Bar Graphs

CSS Vertical Bar Graphs - screen shot.

Eric Meyer shows us another technique for graphing vertical bar graphs using unordered lists similar to the "CSS for Bar Graphs" technique from Apples To Oranges.

4. Creating a Graph Using Percentage Background Images

Creating a Graph Using Percentage Background Images - screen shot.

5. Pure CSS Data Chart

Pure Css Data Chart - screen shot.

View Demo

6. CSS Scatter Plot

CSS absolute positioning scatter plot - screen shot.

A scatter plot is another great way to graph two-dimensional data. In the example, each data point is clickable, so a possible modification to this technique is to use a modal window that displays extra information about a particular data point.

7. Definition List Bar Chart

Definition List Bar Chart - screen shot.

8. Accessible Bar Chart

Accessible Bar Chart - screen shot.

作者 不见不散 本文仅代表作者观点,与龙卷风资讯网立场无关。

我来说两句

内容/Content