You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
68 lines
2.1 KiB
68 lines
2.1 KiB
<!DOCTYPE html> |
|
<html> |
|
|
|
<head> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<title>HTML5 图表 超酷的图表初始化动画效果在线示例</title> |
|
|
|
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" /> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
<div class="charts--container"> |
|
<ul> |
|
<li class="chart"> |
|
<h3 class="chart--subHeadline">Chart 1</h3> |
|
<h2 class="chart--headline">Retail vs Online Purchasing Methods</h2> |
|
<div id="pieChart"> |
|
<svg id="pieChartSVG"> |
|
<defs> |
|
<filter id='pieChartInsetShadow'> |
|
<feOffset dx='0' dy='0'/> |
|
<feGaussianBlur stdDeviation='3' result='offset-blur' /> |
|
<feComposite operator='out' in='SourceGraphic' in2='offset-blur' result='inverse' /> |
|
<feFlood flood-color='black' flood-opacity='1' result='color' /> |
|
<feComposite operator='in' in='color' in2='inverse' result='shadow' /> |
|
<feComposite operator='over' in='shadow' in2='SourceGraphic' /> |
|
</filter> |
|
<filter id="pieChartDropShadow"> |
|
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur" /> |
|
<feOffset in="blur" dx="0" dy="3" result="offsetBlur" /> |
|
<feMerge> |
|
<feMergeNode /> |
|
<feMergeNode in="SourceGraphic" /> |
|
</feMerge> |
|
</filter> |
|
</defs> |
|
</svg> |
|
</div> |
|
</li> |
|
|
|
<li class="chart"> |
|
<h3 class="chart--subHeadline">Chart 2</h3> |
|
<h2 class="chart--headline">Timeline of Retail vs Online Purchasing</h2> |
|
<div id="lineChart"> |
|
<svg id="lineChartSVG" class="lineChart--svg"> |
|
<defs> |
|
<linearGradient id="lineChart--gradientBackgroundArea" x1="0" x2="0" y1="0" y2="1"> |
|
<stop class="lineChart--gradientBackgroundArea--top" offset="0%" /> |
|
<stop class="lineChart--gradientBackgroundArea--bottom" offset="100%" /> |
|
</linearGradient> |
|
</defs> |
|
</svg> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<script src='js/d3.v3.min.js'></script> |
|
|
|
<script src="js/index.js"></script> |
|
|
|
</body> |
|
|
|
</html> |