Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Pie Chart Example
<!DOCTYPE html>
<meta charset="UTF-8">
<link rel="stylesheet" href="">
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;
<title>Pie Chart Example</title>
<button id="button" style="height: 32px; width: 128px;">開票結果</button>
<div class="svgframe">
<svg xmlns="" 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>
<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;">出典:</div>
<script src=""></script>
<script src=""></script>
<script src=""></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.