<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5/SVG线性图表DEMO演示</title>
<style>
@font-face {
font-family: "Source Sans Pro Light";
font-weight: lighter;
src: url("http://meloncholy.com/static/fonts/source-sans-pro/SourceSansPro-Light.otf");
}
html {
font-size: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #222;
color: #fff;
font: lighter normal 18px/22px "Source Sans Pro Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 100%;
padding: 0 50px;
}
h1 {
font-size: 48px;
line-height: 60px;
}
a {
color: #fff;
}
.graph {
background-color: #383838;
font-size: 14px;
height: 50%;
margin-bottom: 16px;
width: 100%;
}
.graph svg {
overflow: visible;
}
.domain {
display: none;
}
.tick {
shape-rendering: "crispEdges";
stroke: #fff;
stroke-width: 1px;
}
.graph-val {
text-anchor: end;
}
text {
fill: #fff;
}
.line {
fill: none;
stroke-width: 3px;
vector-effect: non-scaling-stroke;
}
.area {
vector-effect: non-scaling-stroke;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<h1>Responsive SVG graph demo</h1>
<svg class="graph">
<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">
<g transform="translate(30,0)">
<g class="x axis" transform="translate(0,925)">
<g style="opacity: 1;" transform="translate(0,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 1</text></g><g style="opacity: 1;" transform="translate(61.333333333333336,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 3</text></g><g style="opacity: 1;" transform="translate(122.66666666666667,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 5</text></g><g style="opacity: 1;" transform="translate(184,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 7</text></g><g style="opacity: 1;" transform="translate(245.33333333333334,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle"> 9</text></g><g style="opacity: 1;" transform="translate(306.66666666666663,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">11</text></g><g style="opacity: 1;" transform="translate(368,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">13</text></g><g style="opacity: 1;" transform="translate(429.3333333333333,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">15</text></g><g style="opacity: 1;" transform="translate(490.6666666666667,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">17</text></g><g style="opacity: 1;" transform="translate(552,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">19</text></g><g style="opacity: 1;" transform="translate(613.3333333333333,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">21</text></g><g style="opacity: 1;" transform="translate(674.6666666666667,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">23</text></g><g style="opacity: 1;" transform="translate(736,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">25</text></g><g style="opacity: 1;" transform="translate(797.3333333333334,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">27</text></g><g style="opacity: 1;" transform="translate(858.6666666666666,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">29</text></g><g style="opacity: 1;" transform="translate(920,0)"><line class="tick" y2="6" x2="0"></line><text y="9" x="0" dy=".71em" text-anchor="middle">31</text></g><path class="domain" d="M0,6V0H920V6"></path></g><g class="y axis" transform="translate(0, 0)"><g style="opacity: 1;" transform="translate(0,821.6811859476935)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end">6</text></g><g style="opacity: 1;" transform="translate(0,582.576562528558)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end">7</text></g><g style="opacity: 1;" transform="translate(0,343.4719391094225)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end">8</text></g><g style="opacity: 1;" transform="translate(0,104.36731569028704)"><line class="tick" x2="-6" y2="0"></line><text x="-9" y="0" dy=".32em" text-anchor="end">9</text></g><path class="domain" d="M-6,0H0V900H-6"></path>
</g>
<path class="line" style="stroke: #0072c6;" d="M-0,872.1457551394693C4.6000000000000005,868.0364319269877,26.066666666666666,797.9386846177426,30.666666666666668,787.278743840129S56.733333333333334,728.3835750661772,61.333333333333336,730.0132114379539S87.4,800.0933886879487,92,809.0072287971533S118.06666666666668,842.0399550538006,122.66666666666667,848.8644128925141S148.73333333333332,903.8693836786841,153.33333333333331,900S179.4,804.7627148345915,184,797.2726305115585S210.06666666666666,805.2258784939872,214.66666666666666,800.1322090262267S240.73333333333335,733.6161970338039,245.33333333333334,729.357037608086S271.4,739.532928153508,276,743.3434166833206S302.0666666666666,770.8434939974969,306.66666666666663,780.16355133892S332.73333333333335,868.4036850606145,337.33333333333337,867.610847902295S363.4,784.1589003159586,368,769.592389227992S394.06666666666666,684.3118741070884,398.6666666666667,673.3907000627415S424.7333333333333,633.1596368127348,429.3333333333333,623.9767353033673S455.4,560.0202150727658,460,550.9520132711746S486.06666666666666,503.0663994133497,490.6666666666667,503.06737794881735S516.7333333333333,552.158932327768,521.3333333333334,550.9650604107431S547.4,493.7675390530424,552,487.1490857218206S578.0666666666666,466.1838245385211,582.6666666666666,462.7190159944524S608.7333333333332,445.36620075506227,613.3333333333333,440.95163846757083S639.4000000000001,405.0130857654193,644.0000000000001,403.85818549456644S670.0666666666667,430.18429463403777,674.6666666666667,425.55296818953184S700.7333333333333,349.54268104463677,705.3333333333334,342.1071662344867S731.4,336.02210198471766,736,326.4127707208655S762.0666666666667,213.95556450442257,766.6666666666667,213.98274938312397S792.7333333333333,313.5469356579391,797.3333333333334,326.77523577021793S823.4,388.78075552163386,828,390.36008421350857S854.0666666666666,351.8867510511966,858.6666666666666,347.83295166188077S884.7333333333333,340.20771450620623,889.3333333333334,336.3094256892973S915.4,300.0866334286284,920,295.85576743642764S946.0666666666667,289.97796074285225,950.6666666666667,279.8978791266204S976.7333333333333,161.69844733926686,981.3333333333334,161.4546792200042S1007.4000000000001,271.6895591675776,1012.0000000000001,276.6476375364508S1038.0666666666668,235.6111964084887,1042.6666666666667,227.56239080497983S1068.7333333333336,168.77230061740897,1073.3333333333335,169.33022948966516S1099.4,229.35498269851132,1104,235.00144243506247S1130.0666666666668,243.8367399381625,1134.6666666666667,244.6163593103464S1160.7333333333333,247.0350047114789,1165.3333333333333,245.3963673975146S1191.4,221.92638467412087,1196,222.76786179082364S1222.0666666666666,251.3644285511407,1226.6666666666665,256.61606228688447S1252.7333333333331,298.59417940077356,1257.3333333333333,292.7896449340725S1283.4000000000003,194.32114945786407,1288.0000000000002,179.22226939753637S1314.0666666666668,99.77649519402462,1318.6666666666667,91.47124412970243S1344.7333333333336,75.34593184963478,1349.3333333333335,68.4855885399071S1375.4,4.05988687932836,1380,0S1406.0666666666668,10.077532787466339,1410.6666666666667
HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色.zip
版权申诉
122 浏览量
2022-11-03
23:51:48
上传
评论
收藏 8KB ZIP 举报
HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色.zip （5个子文件） 
132689844448343742 css 
style.css 943B less style.less 951B
index.html 13KB js index.js 962B prefixfree.min.js 6KB资源评论
