Skip to content

Instantly share code, notes, and snippets.

@knowledgecode

knowledgecode/pie-chart.html

Last active December 12, 2015 11:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save knowledgecode/11ebfe5465b6000a6d67 to your computer and use it in GitHub Desktop.
Save knowledgecode/11ebfe5465b6000a6d67 to your computer and use it in GitHub Desktop.
Download ZIP
Pie Chart Example
Raw
pie-chart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/normalize/3.0.3/normalize.min.css">
<style>
body {
color: #333;
font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 15px;
line-height: 28px;
}
.svgframe {
margin: 0 auto;
position: relative;
width: 300px;
}
svg {
display: block;
margin: 14px auto;
}
.label {
background-color: rgba(0,0,0,0.75);
border-radius: 4px;
color: #fff;
display: none;
font-size: 14px;
height: 28px;
line-height: 28px;
padding: 0 8px;
pointer-events: none;
position: absolute;
white-space: nowrap;
}
.label::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
top: 28px;
left: 28px;
margin-left: -4px;
border-left: 4px transparent solid;
border-right: 4px transparent solid;
border-top: 8px rgba(0,0,0,0.75) solid;
}
</style>
<title>Pie Chart Example</title>
</head>
<body>
<button id="button" style="height: 32px; width: 128px;">開票結果</button>
<div class="svgframe">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="340" id="results">
<path d="" fill="#0153d8" stroke="#fff" class="pie"></path>
<path d="" fill="#00c121" stroke="#fff" class="pie"></path>
<path d="" fill="#ffbf00" stroke="#fff" class="pie"></path>
<path d="" fill="#28b0c2" stroke="#fff" class="pie"></path>
<path d="" fill="#ff3c42" stroke="#fff" class="pie"></path>
<path d="" fill="#888" stroke="#fff" class="pie"></path>
<circle cx="150" cy="170" r="75" fill="#fff"></circle>
<rect x="149" y="0" width="3" height="340" stroke="#fff" fill="#f00" style="display: none;"></rect>
<g style="display: none;">
<rect x="80" y="151" width="140" height="15" fill="#fff"></rect>
<text fill="#333" font-size="14" font-weight="bold" text-anchor="middle" x="150" y="164" fill="#f00">Internet Explorer</text>
<rect x="80" y="177" width="140" height="15" fill="#fff"></rect>
<text fill="#333" font-size="14" font-weight="bold" text-anchor="middle" x="150" y="190">辛うじて過半数維持！</text>
</g>
</svg>
<span class="label">Internet Explorer 50.86%</span>
<span class="label">Chrome 31.12%</span>
<span class="label">Firefox 11.28%</span>
<span class="label">Safari 5.01%</span>
<span class="label">Opera 1.28%</span>
<span class="label">other 0.45%</span>
<div style="font-size: 12px; font-style: italic; text-align: center;">出典: https://www.netmarketshare.com/</div>
</div>
<script src="https://cdn.jsdelivr.net/es6-promise/3.0.2/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdn.rawgit.com/knowledgecode/9783bf0567939f0bee59/raw/e47dcb765af83dd70cd2ef6cdbc77e98dac24314/pie-chart.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment