html5圆环图比例教程,Chart.js 使用实例 - 圆环比例图表

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic|Roboto+Condensed:400,300,300italic,400italic,700,700italic|Montserrat:400,700|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic|Titillium+Web:400,200,200italic,300,300italic,400italic,600,600italic,700,700italic,900|Open+Sans+Condensed:300,300italic,700');

#fundivo-hlwn-when-chart {

overflow: hidden;

max-width: 600px;

padding: 20px;

margin: auto;

font-family: 'Roboto condensed', sans-serif;

}

.wrapper div {

min-height: 200px;

}

#hlwn-when {

float: left;

margin-right: 20px;

width: 60%;

}

#hlwn-when-chart-legend {

overflow: hidden;

min-height: 170px;

}

.hlwn-when-chart-legend {

margin-left: 0px;

}

.hlwn-when-chart-legend ul {

list-style-type: none !important;

padding: 0;

margin: 0;

}

.hlwn-when-chart-legend li {

height: 2em;

}

.hlwn-when-chart-legend li span {

display: inline-block;

vertical-align: middle;

width: 18px;

height: 18px;

margin: 5px;

border-radius: 3px;

}

@media screen and (max-width: 480px) {

#hlwn-when {

float: none;

margin-right: 0;

width: auto;

border: 0;

}

#hlwn-when-legend {

margin-top: 10px;

}

}