HTML之环形图_随笔

Chart.js允许通过HTML5的canvas进行图表绘制。这里我们希望绘制一个环形图，点击图上各segment时可以显示自定义的圆形tooltip。Chart.js支持通过几个变量添加tooltip，它提供一个tooltipTemplate但是却不支持自定义tooltip的HTML！于是决定自行绘制tooltip手动添加上去。

我用两个div写的实现楼主所说效果

.div1 {

width:100px

height:100px

background-color:transparent

border:4px solid red

border-radius:60px

margin-top:20px

}

.div2 {

width:60px

height:60px

background-color:#fff

z-index:1

border-radius:45px

position:absolute

top:0

left:80px

}

还有一个是用HTML5的canvas标签，不过得用JS

<!DOCTYPE html>

<html>

<head>

<title>四色空心圆环</title>

<style>

*{ padding:0margin:0font-size:14px }

/* 第一种 */

.wai{ width: 360pxheight: 360pxposition: relativemargin: 120px autoborder-radius: 50%overflow:hidden }

.nei{ width: 160pxheight: 160pxline-height:160pxtext-align:centerbackground-color: #FFFborder-radius: 50%position: absolutemargin: autoleft:0right:0top:0bottom:0 }

.wai .fx{ width: 100%height:100%position:absolutetransform:rotate(45deg) }

.top{ background: #FF00FFwidth: 180pxheight:180pxposition: absolutetop:0left:0 }

.right{ background: #7B4DB1width: 180pxheight:180pxposition: absolutetop:0right:0 }

.bottom{ background: #1AA260width: 180pxheight:180pxposition: absolutebottom:0right:0 }

.left{ background: #20647Dwidth: 180pxheight:180pxposition: absolutebottom:0left:0 }

/* 第二种 */

.ease{

width: 360pxheight: 360pxmargin: 120px autoborder:100px solid redborder-radius:50%overflow:hidden

box-sizing:border-boxline-height:160pxtext-align:center

border-top-color: #FF00FFborder-right-color: #7B4DB1border-bottom-color: #1AA260border-left-color: #20647D

}

</style>

</head>

<body>

</div>

<div class="nei">Hello</div>

</div>

<div class="ease">Hello</div>

</body>

</html>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6200630.html

HTML之环形图

发表评论

评论列表（0条）