Skip to content

Instantly share code, notes, and snippets.

@a2tt
Created June 17, 2021 01:55
Show Gist options
  • Save a2tt/136988b0fa0095bd0cf02a3cfe259cff to your computer and use it in GitHub Desktop.
Save a2tt/136988b0fa0095bd0cf02a3cfe259cff to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>highchart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<style>
/*.highcharts-credits {*/
/* display: none;*/
/*}*/
#highchart-container {
height: 450px;
margin: 0;
}
.highcharts-figure, .highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #EBEBEB;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
</style>
<style>
* {
margin: 0;
padding: 0;
color: white;
}
.round-border {
border-radius: 14px;
}
body {
background-color: #1e2226;
position: relative;
padding: 4px 10px;
}
.video-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.video-wrapper .dimmer {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
/*background-color: transparent;*/
position: absolute;
}
.video-wrapper video {
width: 100%;
min-height: 100vh;
/*min-height: 70vh;*/
vertical-align: top;
object-fit: cover;
}
.contents {
position: relative;
z-index: 1;
max-width: 800px;
padding: 0;
margin: 0 auto;
}
.contents .header {
text-align: center;
}
.performance-summary {
display: flex;
justify-content: space-around;
background-color: rgba(30,34,38, 0.7);
padding: 10px;
flex-wrap: wrap;
font-size: 12px;
text-align: center;
}
.performance-summary .item {
flex: 1;
padding: 14px;
min-width: 150px;
}
.performance-summary .item .title {
font-size: 11px;
color: #aaa;
}
.performance-summary .item .data {
font-size: 15px;
color: #fff;
}
</style>
</head>
<body>
<div class="video-wrapper">
<div class="dimmer"></div>
<video autoplay="" loop="" playsinline="" muted="">
<source src="https://ak.picdn.net/shutterstock/videos/1025112779/preview/stock-footage-abstract-line-lighting-frame-structure-pattern-wireframe-polygon-futuristic-bokeh-digital-data.mp4">
</video>
</div>
<div class="contents">
<div class="header">
<h1>&nbsp;
<!-- Mint-->
</h1>
</div>
<figure class="highcharts-figure">
<div id="highchart-container" class="round-border"></div>
</figure>
<div class="performance-summary round-border">
<div class="item">
<div class="title">누적 수익률</div>
<div class="data">+157.82%</div>
</div>
<div class="item">
<div class="title">1년 수익률</div>
<div class="data">+85.27%</div>
</div>
<div class="item">
<div class="title">3개월 수익률</div>
<div class="data">+32.35%</div>
</div>
<div class="item">
<div class="title">1개월 수익률</div>
<div class="data">+17.42%</div>
</div>
</div>
</div>
</body>
<script>
Highcharts.chart('highchart-container', {
chart: {
type: 'area',
// backgroundColor: 'transparent',
// backgroundColor: 'rgba(0,0,0,0.6)',
backgroundColor: 'rgba(30,34,38,0.7)', // #1e2226
// backgroundColor: '#1e2226',
margin: [50, 40, 44, 90],
},
credits: {
enabled: false,
},
accessibility: {
description: ''
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
},
style: {
color: '#ffffff',
},
},
accessibility: {
rangeDescription: ''
}
},
yAxis: {
title: {
text: 'Balance'
},
gridLineWidth: 0,
labels: {
formatter: function () {
return this.value / 10000000 + 'M';
},
style: {
color: '#ffffff',
},
}
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}</b><br/>{point.x}'
},
plotOptions: {
series: {
// lineColor: '#4aacff',
lineColor: '#a1f7ff',
animation: {
duration: 3500, // drawing duration // 3500 would be good
}
},
area: {
pointStart: 2000,
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
},
},
exporting: {
enabled: false, // hide context menu button
},
series: [{
showInLegend: false,
name: 'MoveMint',
data: [
// 1000000, 984000, 995808, 950000, 988000, 966264, 1057092, 1160687, 1179257, 1120294, 1131496, 1219752, 1341727, 1473216, 1540983, 1581048, 1729666, 1829986, 1862925, 2034314, 2054657, 2153280, 2148973, 2114589, 2182255, 2238993, 2458414, 2664920, 2744867, 2898579, 2968144, 3140296, 2995842, 2923941, 2836222, 3114171, 3207596, 3387221, 3326251, 3519173, 3589556, 3618272, 3748529, 3756026, 3748513, 3748513, 3711027, 3503209, 3447157, 3764295, 3704066, 3785555, 4164110, 4139125, 3940447, 3845876, 4045861, 3997310, 4157202, 4115629, 4173247, 4340176, 4617947, 4340870, 4583958, 4675637, 5115146, 5626660, 5716686, 5991086, 6302622, 6302622, 6705989, 6746224, 6476375, 6139603, 5967694, 6242207, 6229722, 5968073, 6099370, 5965183, 5619202, 5652917, 6037315, 6399553, 6169169, 6329567, 6772636, 7002905, 6680771, 6466986, 6117768, 6521540, 7173694, 7704547, 8305501, 8305501, 7989891, 7814113, 8486126, 9266849, 9785792, 10372939, 10310701, 11238664, 12272621, 12272621, 12125349, 12270853, 13178896, 12519951, 13145948, 14039872, 15219221, 14762644, 16209383, 15885195, 16838306, 18118017, 17719420, 18747146, 19534526, 19847078, 19847078, 19489830, 19918606, 20277140, 20114922, 19109175, 20026415, 19305464, 20000460, 21560495, 23026608, 24914789, 23868367, 26159730, 25008701, 24058370, 25068821, 26923913, 26385434, 26385434, 28707352, 30774281, 32066800, 33670140, 33535459, 32059898, 35201768, 35835399, 34473653, 37852070, 40728827, 42520895, 45072148, 45793302, 44694262, 45409370, 46680832, 43879982, 43704462, 44840778, 42509057, 41063749, 43281191, 46657123, 48430093, 51239038, 54210902, 56054072, 57399369, 63024507, 66175732, 66705137, 66438316, 72019134, 70146636, 77161299, 76081040, 83536981, 83202833, 81039559, 85577774, 83866218, 82021161, 86286261, 82489665, 83974478, 80615498, 76907185, 79829658, 81585910, 84523002, 86720600, 83251776, 81919747, 89947882, 93545797, 96539262, 105420874, 101836564, 96541062, 105422839, 103103536, 100010429, 99810408, 106996757, 101860912, 98193919, 107816923, 114070304, 114982866, 109923619, 106186215, 115955346, 109693757, 105306006, 109939470, 107960559, 107528716, 101507107, 106582462, 116174883, 127560021, 121692260, 129480564, 139321086, 147680351, 158608696, 163684174, 176451539, 184215406, 189373437, 183692233, 186998693, 184380711, 187330802, 195573357, 212392665, 222162727, 227050306, 222963400, 235003423, 245813580, 237947545, 224146587, 243871486, 246797943, 255682668, 270000897, 289980963, 287081153, 302009372, 325566103, 312543458, 306917675, 289730285, 274084849, 287240921, 315390531, 330529276, 336478802, 331095141, 340365804, 344450193, 337561189, 319332884, 351266172, 383582659, 418105098, 443191403, 417486301, 411641492, 389412851, 417450576, 458360732, 460194174, 505293203, 529547276, 510483574, 556427095, 567555636, 547123633, 543840891, 511210437, 538815800, 551747379, 572713779, 627694301, 674143679, 726726885, 718006162, 690721927, 748742568, 820621854, 830469316, 827147438, 896627822, 970151303, 942987066, 982592522, 929532525, 944405045, 1018068638, 975309755, 1063087632, 1069466157, 1088716547, 1195410768, 1204974054, 1219433742, 1334060513, 1414104143, 1349055352, 1427300562, 1515793196, 1643119824, 1804145566, 1952085502, 1959893844, 1967733419, 2144829426, 2097643178, 1971784587, 2145301630, 2123848613, 2251279529, 2273792324, 2305625416, 2374794178, 2279802410, 2412030949, 2315549711, 2514686986, 2685685701, 2674942958, 2562595353, 2460091538, 2647058494, 2858823173, 2824517294, 2762377913, 2850774006, 2959103418, 3107058588, 3125700939, 3413265425, 3433745017, 3330732666, 3650483001, 3906016811, 3906016811, 3765400205, 3803054207, 3726993122, 3861164874, 3876609533, 3861103094, 3930602949, 4142855508, 4499141081, 4625117031, 4726869605, 4594517256,
// 1000000, 982000, 968252, 970188, 983770, 1030990, 1055733, 1100073, 1078071, 1073758, 1101675, 1066421, 1030162, 1017800, 1054440, 1043895, 1037631, 1074985, 1057785, 1057785, 1091634, 1122199, 1146887, 1169824, 1148767, 1107411, 1098551, 1122719, 1151909, 1163428, 1168081, 1219476, 1275571, 1229650, 1288673, 1255167, 1302863, 1271594, 1297025, 1281460, 1276334, 1340150, 1305306, 1305306, 1334022, 1336690, 1379464, 1340839, 1351565, 1346158, 1321927, 1351009, 1399645, 1416440, 1444768, 1499669, 1484672, 1446070, 1422932, 1397319, 1416881, 1391377, 1374680, 1333439, 1296102, 1249442, 1269433, 1320210, 1370377, 1433414, 1387544, 1337592, 1396446, 1432753, 1481466, 1448873, 1411202, 1402734, 1363457, 1393453, 1348862, 1308396, 1350264, 1352964, 1325904, 1272867, 1288141, 1259801, 1257281, 1300028, 1287027, 1276730, 1309924, 1359701, 1378736, 1364948, 1397706, 1436841, 1402356, 1469669, 1516698, 1556132, 1615265, 1647570, 1657455, 1683974, 1653662, 1656969, 1617201, 1581622, 1591111, 1584746, 1616440, 1606741, 1687078, 1680329, 1737460, 1744409, 1775808, 1768704, 1811152, 1753195, 1840854, 1815082, 1746108, 1679755, 1736866, 1792445, 1792445, 1821124, 1806555, 1846299, 1901687, 1939720, 1904805, 1988616, 1984638, 1909221, 1916857, 2005032, 2069193, 2147822, 2083387, 2045886, 2000876, 1960858, 1925562, 1929413, 1983436, 2042939, 2071540, 2170973, 2275179, 2293380, 2334660, 2241273, 2205412, 2253931, 2199836, 2177837, 2169125, 2208169, 2124258, 2069027, 2118683, 2055122, 2108555, 2116989, 2045011, 2061371, 2020143, 2052465, 1978576, 2006276, 2010288, 1978123, 2021641, 1997381, 2029339, 1956282, 1948456, 1913383, 1997571, 2085464, 2156369, 2164994, 2208293, 2278958, 2301747, 2292540, 2210008, 2187907, 2126645, 2109631, 2147604, 2100356, 2049947, 1972049, 2039098, 1969768, 2048558, 2146888, 2095362, 2036691, 2036691, 2069278, 2007199, 1983112, 2014841, 2059167, 1997391, 2057312, 2102572, 2043699, 2109097, 2041605, 1988523, 2024316, 2056705, 1986777, 2074195, 2028562, 2036676, 2122216, 2126460, 2134965, 2062376, 2041752, 1996833, 1976864, 2000586, 2084610, 2138809, 2237194, 2272989, 2186615, 2199734, 2116144, 2094982, 2149451, 2201037, 2231851, 2160431, 2186356, 2147001, 2172765, 2259675, 2277752, 2273196, 2186814, 2164945, 2169274, 2251706, 2296740, 2365642, 2360910, 2379797, 2446431, 2519823, 2514783, 2605315, 2589683, 2657014, 2736724, 2796931, 2774555, 2807849, 2908931, 2920566, 2897201, 2937761, 2867254, 3004882, 3083008, 3021347, 3015304, 2918814, 2848762, 2791786, 2735950, 2763309, 2895947, 2948074, 2989347, 3019240, 2976970, 3036509, 3006143, 2958044, 2958044, 2892967, 2806177, 2884749, 3005908, 3114120, 3026924, 3057193, 3161137, 3268615, 3405896, 3269660, 3282738, 3190821, 3280163, 3306404, 3266727, 3201392, 3086141, 3215758, 3376545, 3383298, 3552462, 3538252, 3502869, 3362754, 3308949, 3408217, 3353685, 3259781, 3292378, 3219945, 3104026, 2979864, 2914306, 3025049, 2922197, 2852064, 2829247, 2778320, 2667187, 2752536, 2791071, 2897131, 2827599, 2878495, 3016662, 2895995, 3040794, 2973896, 3009582, 2973467, 2890209, 2803502, 2691361, 2815163, 2747599, 2698142, 2660368, 2718896, 2778711, 2723136, 2625103, 2740607, 2702238, 2761687, 2711976, 2815031, 2916372, 2916372, 2893041, 2979832, 2902356, 2925574, 2837806, 2832130, 2826465,
1000000, 980000, 1013320, 1039666, 1016793, 1043229, 1091217, 1080304, 1095428, 1143626, 1198520, 1220093, 1288418, 1278110, 1255104, 1230001, 1200480, 1207682, 1195605, 1164519, 1131912, 1122856, 1158787, 1209773, 1255744, 1290904, 1319303, 1303471, 1321719, 1313788, 1326925, 1364078, 1435010, 1460840, 1437466, 1400091, 1444893, 1525807, 1614303, 1649817, 1593723, 1571410, 1593409, 1593409, 1689013, 1658610, 1681830, 1772648, 1801010, 1768591, 1747367, 1761345, 1736686, 1771419, 1870618, 1915512, 1915512, 1934667, 2023661, 1995329, 2043216, 2030956, 1982213, 2097181, 2013293, 1964973, 2082871, 2107865, 2171100, 2179784, 2223379, 2232272, 2263523, 2209198, 2244545, 2284946, 2202687, 2251146, 2161100, 2096267, 2016608, 2089205, 2193665, 2167341, 2254034, 2371243, 2456607, 2466433, 2515761, 2495634, 2440730, 2460255, 2401208, 2324369, 2356910, 2484183, 2603423, 2723180, 2761304, 2695032, 2695032, 2695032, 2738152, 2672436, 2683125, 2640195, 2619073, 2645263, 2613519, 2556021, 2709382, 2747313, 2642915, 2801489, 2751062, 2740057, 2882539, 2778767, 2673173, 2625055, 2766807, 2750206, 2788708, 2693891, 2790871, 2774125, 2757480, 2785054, 2768343, 2879076, 3040304, 3113271, 3032325, 2953484, 3107065, 3156778, 3226227, 3271394, 3179794, 3345143, 3412045, 3316507, 3449167, 3324996, 3484595, 3630947, 3776184, 3730869, 3633866, 3568456, 3511360, 3616700, 3667333, 3748014, 3920422, 4085079, 3938016, 3780495, 3667080, 3872436, 3794987, 3954376, 3938558, 3859786, 3798029, 3828413, 3958579, 3855655, 3971324, 3931610, 4128190, 4070395, 4200647, 4175443, 4125337, 4075832, 4279623, 4416570, 4416570, 4248740, 4155267, 4338098, 4312069, 4225827, 4301891, 4319098, 4301821, 4189973, 4441371, 4565729, 4757489, 4747974, 4928397, 5046678, 4885184, 4885184, 5031739, 5051865, 5304458, 5219586, 5188268, 5458057, 5534469, 5855468, 5832046, 5913694, 6091104, 5920553, 5837665, 6129548, 6068252, 6250299, 6525312, 6877678, 7042742, 7127254, 7084490, 6871955, 7201808, 7619512, 7436643, 7287910, 7302485, 7141830, 7413219, 7709747, 7771424, 7849138, 7660758, 7921223, 8380653, 8581788, 8633278, 8374279, 8190044, 8615926, 8409143, 8610962, 8645405, 8316879, 8300245, 8101039, 8084836, 8359720, 8777706, 9269257, 8991179, 9135037, 9427358, 9597050, 9309138, 9700121, 10262728, 10180626, 10648934, 10308168, 10473098, 10368367, 10098789, 10563333, 10246433, 10758754, 10543578, 10965321, 10724083, 10681186, 11279332, 11843298, 11559058, 11767121, 11390573, 11367791, 11890709, 11771801, 12360391, 12039020, 12087176, 12739883, 12943721, 13383807, 12848454, 12642878, 12314163, 12929871, 12464395, 12838326, 12376146, 11905852, 12239215, 12092344, 12479299, 13103263, 13574980, 13113430, 13349471, 13162578, 12978301, 12666821, 12666821, 12540152, 12439830, 11967116, 12397932, 12348340, 12373036, 12496766, 12096869, 12677518, 12702873, 12982336, 13397770, 13236996, 13210522, 13104837, 13707659, 14447872, 14881308, 15595610, 15314889, 15988744, 15860834, 15353287, 14954101, 15253183, 16046348, 16912850, 17826143, 17433967, 17817514, 18886564, 19339841, 20345512, 21240714, 21920416, 21175121, 21471572, 21815117, 22862242, 23182313, 23089583, 22812508, 23040633, 22487657, 23297212, 24695044, 25929796, 25100042, 24798841, 25245220, 24639334, 25969858, 24983003, 25882391, 27383569, 27493103, 27383130, 26725934, 26832837, 28013481, 29414155, 28884700, 28075928, 27514409, 27459380, 28667592, 28954267,
]
},]
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment