标签：html5 css3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div data-highcharts-chart="1" id="scoreChart" class="score-chart" chart-data="[["\u6781\u4f73",197.36],["\u63a8\u8350",45.825],["\u4e00\u822c",7],["\u4e0d\u597d",1],["\u5f88\u5dee",4]]">
<div style="position: relative; overflow: hidden; width: 315px; height: 190px; text-align: left; line-height: normal; z-index: 0; left: 0.5px; top: 0px;" id="highcharts-2" class="highcharts-container"><svg height="190" width="315" xmlns="http://www.w3.org/2000/svg" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" version="1.1">
<desc>Created with Highcharts 4.0.3</desc>
<defs>
<clipPath id="highcharts-3">
<rect height="165" width="191" y="0" x="0"></rect>
</clipPath>
</defs>
<rect class=" highcharts-background" fill="rgba(0,0,0,0)" strokeWidth="0" height="190" width="315" y="0" x="0"></rect>
<g zIndex="3" class="highcharts-series-group">
<g style="cursor:pointer;" transform="translate(10,10) scale(1 1)" zIndex="0.1" visibility="visible" class="highcharts-series highcharts-tracker">
<path transform="translate(0,0)" stroke-linejoin="round" stroke-width="1" stroke="#FFFFFF" d="M 180 85 A 84.5 84.5 0 1 1 107.76069736342929 1.3942268730059624 L 103.84307808754063 28.10849757630583 A 57.5 57.5 0 1 0 153 85 Z" fill="#f8a1aa"></path>
<path transform="translate(0,0)" stroke-linejoin="round" stroke-width="1" stroke="#FFFFFF" d="M 107.84429699227384 1.4065293712090323 A 84.5 84.5 0 0 1 176.32060418319307 60.33666811917672 L 150.49626911874086 68.21725937103741 A 57.5 57.5 0 0 0 103.89996540894374 28.116869098751707 Z" fill="rgba(255,183,112,1)"></path>
<path transform="translate(0,0)" stroke-linejoin="round" stroke-width="1" stroke="#FFFFFF" d="M 176.34522710066463 60.41750104155476 A 84.5 84.5 0 0 1 179.34925785743053 74.53329293626084 L 152.55718729943496 77.87768454242601 A 57.5 57.5 0 0 0 150.51302435844042 68.27226402235975 Z" fill="#79c4a5"></path>
<path transform="translate(0,0)" stroke-linejoin="round" stroke-width="1" stroke="#FFFFFF" d="M 179.35968263812435 74.61714741349653 A 84.5 84.5 0 0 1 179.58469674945127 76.6325767076822 L 152.71739719637213 79.30619125078967 A 57.5 57.5 0 0 0 152.5642810851142 77.93474528137337 Z" fill="#72c8d7"></path>
<path transform="translate(0,0)" stroke-linejoin="round" stroke-width="1" stroke="#FFFFFF" d="M 179.5930221290041 76.71666557412885 A 84.5 84.5 0 0 1 179.99994064073803 84.89984156677794 L 152.99995960760282 84.93184485313292 A 57.5 57.5 0 0 0 152.72306239547618 79.36341148535396 Z" fill="#a7c0de"></path>
</g>
<g transform="translate(10,10) scale(1 1)" zIndex="0.1" visibility="visible" class="highcharts-markers"></g>
</g>
<text y="25" style="color:#333333;font-size:18px;display:none;fill:#333333;width:251px;" zIndex="4" class="highcharts-title" text-anchor="middle" x="158">点评得分分布图</text>
<g transform="translate(207,28)" zIndex="7" class="highcharts-legend">
<g zIndex="1">
<g>
<g transform="translate(8,3)" zIndex="1" class="highcharts-legend-item">
<text y="15" zIndex="2" text-anchor="start" style="color:#666666;font-size:12px;font-weight:normal;cursor:pointer;font-family:Microsoft YaHei;fill:#666666;" x="19">
<tspan>极佳 77.34%</tspan>
</text>
<rect fill="#f8a1aa" zIndex="3" height="12" width="12" y="4" x="0"></rect>
</g>
<g transform="translate(8,30)" zIndex="1" class="highcharts-legend-item">
<text zIndex="2" text-anchor="start" style="color:#666666;font-size:12px;font-weight:normal;cursor:pointer;font-family:Microsoft YaHei;fill:#666666;" y="15" x="19">
<tspan>推荐 17.96%</tspan>
</text>
<rect fill="#ff9e57" zIndex="3" height="12" width="12" y="4" x="0"></rect>
</g>
<g transform="translate(8,57)" zIndex="1" class="highcharts-legend-item">
<text zIndex="2" text-anchor="start" style="color:#666666;font-size:12px;font-weight:normal;cursor:pointer;font-family:Microsoft YaHei;fill:#666666;" y="15" x="19">
<tspan>一般 2.74%</tspan>
</text>
<rect fill="#79c4a5" zIndex="3" height="12" width="12" y="4" x="0"></rect>
</g>
<g transform="translate(8,84)" zIndex="1" class="highcharts-legend-item">
<text zIndex="2" text-anchor="start" style="color:#666666;font-size:12px;font-weight:normal;cursor:pointer;font-family:Microsoft YaHei;fill:#666666;" y="15" x="19">
<tspan>不好 0.39%</tspan>
</text>
<rect fill="#72c8d7" zIndex="3" height="12" width="12" y="4" x="0"></rect>
</g>
<g transform="translate(8,111)" zIndex="1" class="highcharts-legend-item">
<text zIndex="2" text-anchor="start" style="color:#666666;font-size:12px;font-weight:normal;cursor:pointer;font-family:Microsoft YaHei;fill:#666666;" y="15" x="19">
<tspan>很差 1.57%</tspan>
</text>
<rect fill="#a7c0de" zIndex="3" height="12" width="12" y="4" x="0"></rect>
</g>
</g>
</g>
</g>
<g visibility="visible" opacity="1" transform="translate(103,17)" style="cursor:default;padding:0;white-space:nowrap;" zIndex="8" class="highcharts-tooltip">
<path height="35" width="137" transform="translate(1, 1)" stroke-width="5" stroke-opacity="0.049999999999999996" stroke="black" isShadow="true" d="M 3.5 0.5 L 134.5 0.5 C 137.5 0.5 137.5 0.5 137.5 3.5 L 137.5 32.5 C 137.5 35.5 137.5 35.5 134.5 35.5 L 3.5 35.5 C 0.5 35.5 0.5 35.5 0.5 32.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none"></path>
<path height="35" width="137" transform="translate(1, 1)" stroke-width="3" stroke-opacity="0.09999999999999999" stroke="black" isShadow="true" d="M 3.5 0.5 L 134.5 0.5 C 137.5 0.5 137.5 0.5 137.5 3.5 L 137.5 32.5 C 137.5 35.5 137.5 35.5 134.5 35.5 L 3.5 35.5 C 0.5 35.5 0.5 35.5 0.5 32.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none"></path>
<path height="35" width="137" transform="translate(1, 1)" stroke-width="1" stroke-opacity="0.15" stroke="black" isShadow="true" d="M 3.5 0.5 L 134.5 0.5 C 137.5 0.5 137.5 0.5 137.5 3.5 L 137.5 32.5 C 137.5 35.5 137.5 35.5 134.5 35.5 L 3.5 35.5 C 0.5 35.5 0.5 35.5 0.5 32.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="none"></path>
<path stroke-width="1" stroke="#ff9e57" d="M 3.5 0.5 L 134.5 0.5 C 137.5 0.5 137.5 0.5 137.5 3.5 L 137.5 32.5 C 137.5 35.5 137.5 35.5 134.5 35.5 L 3.5 35.5 C 0.5 35.5 0.5 35.5 0.5 32.5 L 0.5 3.5 C 0.5 0.5 0.5 0.5 3.5 0.5" fill="rgba(249, 249, 249, .85)"></path>
<text y="22" style="font-size:14px;font-family:Microsoft YaHei;color:#333333;fill:#333333;" zIndex="1" x="8">
<tspan>推荐 : 17.96% 的人</tspan>
</text>
</g>
</svg></div>
</div>
</body>
</html>
标签：html5 css3
原文地址：http://blog.csdn.net/zhongyi0731/article/details/45012455
