<!doctype html>
<html lang="ko">
<head>
<script async src=" https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7714047072830641 "
crossorigin="anonymous"></script>
<meta name="google-site-verification" content="WTRnGSasF25Vs5yHq_5kVdWyei_6_scUHzCCXFxltfU" />
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>1</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
</head>
<body id="tt-body-page" class="<s_if_var_layout-type> </s_if_var_layout-type><s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<div class="canvas-holder">
<canvas id="chart-area" width="1000" height="400"></canvas>
</div>
<script>
let xhr = new XMLHttpRequest();
let elements_index;
let chart_data_index
xhr.open("GET", "https://zenowo.tistory.com/353");
xhr.responseType='document';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
elements_index = xhr.response
elements_index = elements_index.getElementsByClassName("contents_style");
chart_data_index = elements_index.item(0).innerText;
chart_data_index = chart_data_index.replaceAll("(", "{")
chart_data_index = chart_data_index.replaceAll(")", "}")
chart_data_index = chart_data_index.replaceAll("'", '"')
chart_data_index = JSON.parse(chart_data_index)
isPositive = function (num) {
return num >= 0;
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myTreeMap = new Chart(ctx, {
type: "treemap",
data: {
datasets: [
{
tree: chart_data_index,
key: "시가총액",
groups: ["업종명", "종목명"],
fontFamily: "Verdana",
fontColor: function () {
return Chart.helpers.color("black").alpha(0.9).rgbString();
},
fontSize: 15,
fontWeight: "bold",
backgroundColor: function (ctx) {
var item = ctx.dataset.data[ctx.dataIndex];
// console.log(ctx);
if (!item) {
return;
}
var 등락률 = item._data.children[0].등락률;
if (등락률 == 0) {
return "hsl(0, 0%, 40%)";
// return Chart.helpers.color("black").alpha(0.3).rgbString();
}else if (isPositive(등락률)) {
switch (true) {
case 등락률 < 1:
return "hsl(121, 20%, 62%)";
// return Chart.helpers.color("green").alpha(0.1).rgbString();
case 등락률 < 2:
return "hsl(121, 40%, 62%)";
// return Chart.helpers.color("green").alpha(0.3).rgbString();
case 등락률 < 3:
return "hsl(121, 60%, 62%)";
// return Chart.helpers.color("green").alpha(0.5).rgbString();
case 등락률 < 4:
return "hsl(121, 80%, 62%)";
// return Chart.helpers.color("green").alpha(0.7).rgbString();
default:
return "hsl(121, 100%, 62%)";
// return Chart.helpers.color("green").alpha(1).rgbString();
}
} else {
switch (true) {
case 등락률 > -1:
return "hsl(0, 20%, 62%)";
// return Chart.helpers.color("red").alpha(0.1).rgbString();
case 등락률 > -2:
return "hsl(0, 40%, 62%)";
// return Chart.helpers.color("red").alpha(0.3).rgbString();
case 등락률 > -3:
return "hsl(0, 60%, 62%)";
// return Chart.helpers.color("red").alpha(0.5).rgbString();
case 등락률 > -4:
return "hsl(0, 80%, 62%)";
// return Chart.helpers.color("red").alpha(0.7).rgbString();
default:
return "hsl(0, 100%, 62%)";
// return Chart.helpers.color("red").alpha(1).rgbString();
}
}
},
spacing: 0.7,
borderWidth: 0.3,
borderColor: Chart.helpers.color("black").alpha(1).rgbString(),
},
],
},
options: {
maintainAspectRatio: false,
title: {
display: false,
text: "코스피 트리맵",
},
legend: {
display: false,
},
tooltips: {
callbacks: {
title: function () {
return "전일대비";
},
label: function (item, data) {
var dataset = data.datasets[item.datasetIndex];
var dataItem = dataset.data[item.index];
var obj = dataItem._data;
var label = obj.종목명 || obj.업종명;
return label + ": " + obj.children[0].등락률;
},
},
},
},
});
}
};
xhr.send();
</script>
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<div class="inner">
<h1>
<a href="https://zenowo.tistory.com/">
<s_if_var_logo-image>
<img src="" alt="블로구">
</s_if_var_logo-image>
<s_not_var_logo-image>
블로구
</s_not_var_logo-image>
</a>
</h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<nav id="gnb">
</nav>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-slider'>
<div class='cover-slider'>
<ul>
<s_cover_item>
<li style="background-image: url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)">
<a href="" class="text-box">
<span class="title">
<s_cover_item_article_info>
<em></em>
</s_cover_item_article_info>
</span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-thumbnail-list-1'>
<div class="cover-thumbnail-list-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-special-contents'>
<div class="cover-special-contents">
<ul>
<s_cover_item>
<li>
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
<a href="" class="btn view">더보기</a>
</span>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-wide-panel'>
<s_cover_item>
<div class="cover-wide-panel">
<div class="bg" style="background-image:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>);"></div>
<div class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<h2></h2>
<p></p>
<a href="" class="btn view">더보기</a>
</div>
</div>
</s_cover_item>
</s_cover>
<s_cover name='cover-thumbnail-list-2'>
<div class="cover-thumbnail-list-2">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1>1</h1>
</div>
<div class="entry-content">
<!doctype html>
<html lang="ko">
<head>
<script async src=" https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7714047072830641 "
crossorigin="anonymous"></script>
<meta name="google-site-verification" content="WTRnGSasF25Vs5yHq_5kVdWyei_6_scUHzCCXFxltfU" />
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>1</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
</head>
<body id="tt-body-page" class="<s_if_var_layout-type> </s_if_var_layout-type><s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<div class="canvas-holder">
<canvas id="chart-area" width="1000" height="400"></canvas>
</div>
<script>
let xhr = new XMLHttpRequest();
let elements_index;
let chart_data_index
xhr.open("GET", "https://zenowo.tistory.com/353");
xhr.responseType='document';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
elements_index = xhr.response
elements_index = elements_index.getElementsByClassName("contents_style");
chart_data_index = elements_index.item(0).innerText;
chart_data_index = chart_data_index.replaceAll("(", "{")
chart_data_index = chart_data_index.replaceAll(")", "}")
chart_data_index = chart_data_index.replaceAll("'", '"')
chart_data_index = JSON.parse(chart_data_index)
isPositive = function (num) {
return num >= 0;
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myTreeMap = new Chart(ctx, {
type: "treemap",
data: {
datasets: [
{
tree: chart_data_index,
key: "시가총액",
groups: ["업종명", "종목명"],
fontFamily: "Verdana",
fontColor: function () {
return Chart.helpers.color("black").alpha(0.9).rgbString();
},
fontSize: 15,
fontWeight: "bold",
backgroundColor: function (ctx) {
var item = ctx.dataset.data[ctx.dataIndex];
// console.log(ctx);
if (!item) {
return;
}
var 등락률 = item._data.children[0].등락률;
if (등락률 == 0) {
return "hsl(0, 0%, 40%)";
// return Chart.helpers.color("black").alpha(0.3).rgbString();
}else if (isPositive(등락률)) {
switch (true) {
case 등락률 < 1:
return "hsl(121, 20%, 62%)";
// return Chart.helpers.color("green").alpha(0.1).rgbString();
case 등락률 < 2:
return "hsl(121, 40%, 62%)";
// return Chart.helpers.color("green").alpha(0.3).rgbString();
case 등락률 < 3:
return "hsl(121, 60%, 62%)";
// return Chart.helpers.color("green").alpha(0.5).rgbString();
case 등락률 < 4:
return "hsl(121, 80%, 62%)";
// return Chart.helpers.color("green").alpha(0.7).rgbString();
default:
return "hsl(121, 100%, 62%)";
// return Chart.helpers.color("green").alpha(1).rgbString();
}
} else {
switch (true) {
case 등락률 > -1:
return "hsl(0, 20%, 62%)";
// return Chart.helpers.color("red").alpha(0.1).rgbString();
case 등락률 > -2:
return "hsl(0, 40%, 62%)";
// return Chart.helpers.color("red").alpha(0.3).rgbString();
case 등락률 > -3:
return "hsl(0, 60%, 62%)";
// return Chart.helpers.color("red").alpha(0.5).rgbString();
case 등락률 > -4:
return "hsl(0, 80%, 62%)";
// return Chart.helpers.color("red").alpha(0.7).rgbString();
default:
return "hsl(0, 100%, 62%)";
// return Chart.helpers.color("red").alpha(1).rgbString();
}
}
},
spacing: 0.7,
borderWidth: 0.3,
borderColor: Chart.helpers.color("black").alpha(1).rgbString(),
},
],
},
options: {
maintainAspectRatio: false,
title: {
display: false,
text: "코스피 트리맵",
},
legend: {
display: false,
},
tooltips: {
callbacks: {
title: function () {
return "전일대비";
},
label: function (item, data) {
var dataset = data.datasets[item.datasetIndex];
var dataItem = dataset.data[item.index];
var obj = dataItem._data;
var label = obj.종목명 || obj.업종명;
return label + ": " + obj.children[0].등락률;
},
},
},
},
});
}
};
xhr.send();
</script>
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<div class="inner">
<h1>
<a href="https://zenowo.tistory.com/">
<s_if_var_logo-image>
<img src="" alt="블로구">
</s_if_var_logo-image>
<s_not_var_logo-image>
블로구
</s_not_var_logo-image>
</a>
</h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<nav id="gnb">
</nav>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-slider'>
<div class='cover-slider'>
<ul>
<s_cover_item>
<li style="background-image: url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)">
<a href="" class="text-box">
<span class="title">
<s_cover_item_article_info>
<em></em>
</s_cover_item_article_info>
</span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-thumbnail-list-1'>
<div class="cover-thumbnail-list-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-special-contents'>
<div class="cover-special-contents">
<ul>
<s_cover_item>
<li>
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
<a href="" class="btn view">더보기</a>
</span>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-wide-panel'>
<s_cover_item>
<div class="cover-wide-panel">
<div class="bg" style="background-image:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>);"></div>
<div class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<h2></h2>
<p></p>
<a href="" class="btn view">더보기</a>
</div>
</div>
</s_cover_item>
</s_cover>
<s_cover name='cover-thumbnail-list-2'>
<div class="cover-thumbnail-list-2">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<h2></h2>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt">보호되어 있는 글입니다.</span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
</div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":625431,"template":"carousel","trackingCode":"AF9246913","width":"728","height":"90"});
</script>
</div>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C200x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<label for="" class="screen_out">댓글</label>
<textarea id="" name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup tag">
<h2>태그</h2>
</div>
<div class="tags section">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="hgroup guest">
<h2>방명록</h2>
</div>
<div class="comments guest">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
<aside id="aside">
<div class="inner">
<div class="sidebar-1">
<s_sidebar>
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="posts">
<h2>공지사항</h2>
<ul>
<s_rct_notice_rep>
<li><a href="" class="link_board"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근 포스트 -->
<div class="posts">
<h2>최근 포스트</h2>
<ul>
<s_rctps_rep>
<li><a href=""></a></li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-2">
<s_sidebar>
<s_sidebar_element>
<!-- 태그 -->
<div class="tags">
<h2>태그</h2>
<div class="items">
<s_random_tags>
<a href=""></a>
</s_random_tags>
</div>
<a href="/tag" class="more">더보기</a>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-3">
<s_sidebar>
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<h2>검색</h2>
<s_search>
<fieldset>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13 ) { }">
<button type="button" onclick="">검색</button>
</fieldset>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 전체 방문자 -->
<div class="count">
<h2>전체 방문자</h2>
<p class="total"></p>
<ul>
<li><strong>오늘</strong></li>
<li><strong>어제</strong></li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
</div>
</aside>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://zenowo.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "184a543504bb6c0";
if(window.wcs) {
wcs_do();
}
</script>
</body>
</html>
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<h2></h2>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="/353">
<span class="thum"></span>
<span class="title">1</span>
<span class="excerpt">보호되어 있는 글입니다.</span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1>1 </h1>
<div class="post-meta">
<span class="author">블로구짱</span>
<span class="date">2023. 2. 2. 16:53</span>
</div>
</div>
<div class="entry-content">
<!doctype html>
<html lang="ko">
<head>
<script async src=" https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7714047072830641 "
crossorigin="anonymous"></script>
<meta name="google-site-verification" content="WTRnGSasF25Vs5yHq_5kVdWyei_6_scUHzCCXFxltfU" />
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>1</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
</head>
<body id="tt-body-page" class="<s_if_var_layout-type> </s_if_var_layout-type><s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<div class="canvas-holder">
<canvas id="chart-area" width="1000" height="400"></canvas>
</div>
<script>
let xhr = new XMLHttpRequest();
let elements_index;
let chart_data_index
xhr.open("GET", "https://zenowo.tistory.com/353");
xhr.responseType='document';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
elements_index = xhr.response
elements_index = elements_index.getElementsByClassName("contents_style");
chart_data_index = elements_index.item(0).innerText;
chart_data_index = chart_data_index.replaceAll("(", "{")
chart_data_index = chart_data_index.replaceAll(")", "}")
chart_data_index = chart_data_index.replaceAll("'", '"')
chart_data_index = JSON.parse(chart_data_index)
isPositive = function (num) {
return num >= 0;
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myTreeMap = new Chart(ctx, {
type: "treemap",
data: {
datasets: [
{
tree: chart_data_index,
key: "시가총액",
groups: ["업종명", "종목명"],
fontFamily: "Verdana",
fontColor: function () {
return Chart.helpers.color("black").alpha(0.9).rgbString();
},
fontSize: 15,
fontWeight: "bold",
backgroundColor: function (ctx) {
var item = ctx.dataset.data[ctx.dataIndex];
// console.log(ctx);
if (!item) {
return;
}
var 등락률 = item._data.children[0].등락률;
if (등락률 == 0) {
return "hsl(0, 0%, 40%)";
// return Chart.helpers.color("black").alpha(0.3).rgbString();
}else if (isPositive(등락률)) {
switch (true) {
case 등락률 < 1:
return "hsl(121, 20%, 62%)";
// return Chart.helpers.color("green").alpha(0.1).rgbString();
case 등락률 < 2:
return "hsl(121, 40%, 62%)";
// return Chart.helpers.color("green").alpha(0.3).rgbString();
case 등락률 < 3:
return "hsl(121, 60%, 62%)";
// return Chart.helpers.color("green").alpha(0.5).rgbString();
case 등락률 < 4:
return "hsl(121, 80%, 62%)";
// return Chart.helpers.color("green").alpha(0.7).rgbString();
default:
return "hsl(121, 100%, 62%)";
// return Chart.helpers.color("green").alpha(1).rgbString();
}
} else {
switch (true) {
case 등락률 > -1:
return "hsl(0, 20%, 62%)";
// return Chart.helpers.color("red").alpha(0.1).rgbString();
case 등락률 > -2:
return "hsl(0, 40%, 62%)";
// return Chart.helpers.color("red").alpha(0.3).rgbString();
case 등락률 > -3:
return "hsl(0, 60%, 62%)";
// return Chart.helpers.color("red").alpha(0.5).rgbString();
case 등락률 > -4:
return "hsl(0, 80%, 62%)";
// return Chart.helpers.color("red").alpha(0.7).rgbString();
default:
return "hsl(0, 100%, 62%)";
// return Chart.helpers.color("red").alpha(1).rgbString();
}
}
},
spacing: 0.7,
borderWidth: 0.3,
borderColor: Chart.helpers.color("black").alpha(1).rgbString(),
},
],
},
options: {
maintainAspectRatio: false,
title: {
display: false,
text: "코스피 트리맵",
},
legend: {
display: false,
},
tooltips: {
callbacks: {
title: function () {
return "전일대비";
},
label: function (item, data) {
var dataset = data.datasets[item.datasetIndex];
var dataItem = dataset.data[item.index];
var obj = dataItem._data;
var label = obj.종목명 || obj.업종명;
return label + ": " + obj.children[0].등락률;
},
},
},
},
});
}
};
xhr.send();
</script>
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<div class="inner">
<h1>
<a href="https://zenowo.tistory.com/">
<s_if_var_logo-image>
<img src="" alt="블로구">
</s_if_var_logo-image>
<s_not_var_logo-image>
블로구
</s_not_var_logo-image>
</a>
</h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<nav id="gnb">
</nav>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-slider'>
<div class='cover-slider'>
<ul>
<s_cover_item>
<li style="background-image: url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)">
<a href="" class="text-box">
<span class="title">
<s_cover_item_article_info>
<em></em>
</s_cover_item_article_info>
</span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-thumbnail-list-1'>
<div class="cover-thumbnail-list-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-special-contents'>
<div class="cover-special-contents">
<ul>
<s_cover_item>
<li>
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
<a href="" class="btn view">더보기</a>
</span>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-wide-panel'>
<s_cover_item>
<div class="cover-wide-panel">
<div class="bg" style="background-image:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>);"></div>
<div class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<h2></h2>
<p></p>
<a href="" class="btn view">더보기</a>
</div>
</div>
</s_cover_item>
</s_cover>
<s_cover name='cover-thumbnail-list-2'>
<div class="cover-thumbnail-list-2">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<h2></h2>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt">보호되어 있는 글입니다.</span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
</div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":625431,"template":"carousel","trackingCode":"AF9246913","width":"728","height":"90"});
</script>
</div>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C200x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<label for="" class="screen_out">댓글</label>
<textarea id="" name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup tag">
<h2>태그</h2>
</div>
<div class="tags section">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="hgroup guest">
<h2>방명록</h2>
</div>
<div class="comments guest">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
<aside id="aside">
<div class="inner">
<div class="sidebar-1">
<s_sidebar>
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="posts">
<h2>공지사항</h2>
<ul>
<s_rct_notice_rep>
<li><a href="" class="link_board"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근 포스트 -->
<div class="posts">
<h2>최근 포스트</h2>
<ul>
<s_rctps_rep>
<li><a href=""></a></li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-2">
<s_sidebar>
<s_sidebar_element>
<!-- 태그 -->
<div class="tags">
<h2>태그</h2>
<div class="items">
<s_random_tags>
<a href=""></a>
</s_random_tags>
</div>
<a href="/tag" class="more">더보기</a>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-3">
<s_sidebar>
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<h2>검색</h2>
<s_search>
<fieldset>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13 ) { }">
<button type="button" onclick="">검색</button>
</fieldset>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 전체 방문자 -->
<div class="count">
<h2>전체 방문자</h2>
<p class="total"></p>
<ul>
<li><strong>오늘</strong></li>
<li><strong>어제</strong></li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
</div>
</aside>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://zenowo.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "184a543504bb6c0";
if(window.wcs) {
wcs_do();
}
</script>
</body>
</html>
<form class="protected_form" onsubmit="{reloadEntry(353);return false;}">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="entry353password" name="entry353password" value="" placeholder="비밀번호" />
<button type="submit" class="btn">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="/353">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C276x260/?fname=https://blog.kakaocdn.net/dn/qdL7V/btrVU89r9mL/0TLVYZaV8iZ2V0BpbGWFU1/img.png" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title">1</span>
<span class="excerpt">본문 바로가기 메뉴 더보기 더보기 더보기 더보기 썸네일형 리스트형 보호되어 있는 글입니다. 더보기 보호글 보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요. 확인 더보기 수정 삭제 태그 "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." '' Related Articles 댓글주소 수정/삭제 댓글쓰기 댓글주소 수정/삭제 Secret 댓글 댓글달기 태그 방명록 안부 남기기 수정/삭제 댓글쓰기 수정/삭제 이전 다음 공지사항 최근 포스트 태그 더보기 검색 블로그 내 검색 검색 전체 방문자 오늘 어제 DESIGN BY TISTORY 관리자</span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">카테고리 없음</div>
<h1>1 </h1>
<div class="post-meta">
<span class="author">블로구짱</span>
<span class="date">2023. 2. 2. 16:53</span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
</div>
</div>
</div>
<div class="entry-content">
<!doctype html>
<html lang="ko">
<head>
<script async src=" https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7714047072830641 "
crossorigin="anonymous"></script>
<meta name="google-site-verification" content="WTRnGSasF25Vs5yHq_5kVdWyei_6_scUHzCCXFxltfU" />
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
<title>1</title>
<link rel="stylesheet" href="./style.css">
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-chart-treemap@0.2.3"></script>
</head>
<body id="tt-body-page" class="<s_if_var_layout-type> </s_if_var_layout-type><s_if_var_color-type></s_if_var_color-type><s_if_var_post-type> </s_if_var_post-type><s_if_var_view-more> paging-view-more</s_if_var_view-more>">
<div class="canvas-holder">
<canvas id="chart-area" width="1000" height="400"></canvas>
</div>
<script>
let xhr = new XMLHttpRequest();
let elements_index;
let chart_data_index
xhr.open("GET", "https://zenowo.tistory.com/353");
xhr.responseType='document';
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
elements_index = xhr.response
elements_index = elements_index.getElementsByClassName("contents_style");
chart_data_index = elements_index.item(0).innerText;
chart_data_index = chart_data_index.replaceAll("(", "{")
chart_data_index = chart_data_index.replaceAll(")", "}")
chart_data_index = chart_data_index.replaceAll("'", '"')
chart_data_index = JSON.parse(chart_data_index)
isPositive = function (num) {
return num >= 0;
};
var ctx = document.getElementById("chart-area").getContext("2d");
window.myTreeMap = new Chart(ctx, {
type: "treemap",
data: {
datasets: [
{
tree: chart_data_index,
key: "시가총액",
groups: ["업종명", "종목명"],
fontFamily: "Verdana",
fontColor: function () {
return Chart.helpers.color("black").alpha(0.9).rgbString();
},
fontSize: 15,
fontWeight: "bold",
backgroundColor: function (ctx) {
var item = ctx.dataset.data[ctx.dataIndex];
// console.log(ctx);
if (!item) {
return;
}
var 등락률 = item._data.children[0].등락률;
if (등락률 == 0) {
return "hsl(0, 0%, 40%)";
// return Chart.helpers.color("black").alpha(0.3).rgbString();
}else if (isPositive(등락률)) {
switch (true) {
case 등락률 < 1:
return "hsl(121, 20%, 62%)";
// return Chart.helpers.color("green").alpha(0.1).rgbString();
case 등락률 < 2:
return "hsl(121, 40%, 62%)";
// return Chart.helpers.color("green").alpha(0.3).rgbString();
case 등락률 < 3:
return "hsl(121, 60%, 62%)";
// return Chart.helpers.color("green").alpha(0.5).rgbString();
case 등락률 < 4:
return "hsl(121, 80%, 62%)";
// return Chart.helpers.color("green").alpha(0.7).rgbString();
default:
return "hsl(121, 100%, 62%)";
// return Chart.helpers.color("green").alpha(1).rgbString();
}
} else {
switch (true) {
case 등락률 > -1:
return "hsl(0, 20%, 62%)";
// return Chart.helpers.color("red").alpha(0.1).rgbString();
case 등락률 > -2:
return "hsl(0, 40%, 62%)";
// return Chart.helpers.color("red").alpha(0.3).rgbString();
case 등락률 > -3:
return "hsl(0, 60%, 62%)";
// return Chart.helpers.color("red").alpha(0.5).rgbString();
case 등락률 > -4:
return "hsl(0, 80%, 62%)";
// return Chart.helpers.color("red").alpha(0.7).rgbString();
default:
return "hsl(0, 100%, 62%)";
// return Chart.helpers.color("red").alpha(1).rgbString();
}
}
},
spacing: 0.7,
borderWidth: 0.3,
borderColor: Chart.helpers.color("black").alpha(1).rgbString(),
},
],
},
options: {
maintainAspectRatio: false,
title: {
display: false,
text: "코스피 트리맵",
},
legend: {
display: false,
},
tooltips: {
callbacks: {
title: function () {
return "전일대비";
},
label: function (item, data) {
var dataset = data.datasets[item.datasetIndex];
var dataItem = dataset.data[item.index];
var obj = dataItem._data;
var label = obj.종목명 || obj.업종명;
return label + ": " + obj.children[0].등락률;
},
},
},
},
});
}
};
xhr.send();
</script>
<s_t3>
<div id="acc-nav">
<a href="#content">본문 바로가기</a>
</div>
<div id="wrap">
<header id="header">
<div class="inner">
<h1>
<a href="https://zenowo.tistory.com/">
<s_if_var_logo-image>
<img src="" alt="블로구">
</s_if_var_logo-image>
<s_not_var_logo-image>
블로구
</s_not_var_logo-image>
</a>
</h1>
<button type="button" class="mobile-menu"><span>메뉴</span></button>
<nav id="gnb">
</nav>
</div>
</header>
<hr>
<section class="container">
<article id="content">
<s_cover_group>
<s_cover_rep>
<s_cover name='cover-slider'>
<div class='cover-slider'>
<ul>
<s_cover_item>
<li style="background-image: url(<s_cover_item_thumbnail></s_cover_item_thumbnail>)">
<a href="" class="text-box">
<span class="title">
<s_cover_item_article_info>
<em></em>
</s_cover_item_article_info>
</span>
<span class="btn view">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-thumbnail-list-1'>
<div class="cover-thumbnail-list-1">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C264x200/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-special-contents'>
<div class="cover-special-contents">
<ul>
<s_cover_item>
<li>
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<span class="title"></span>
<span class="excerpt"></span>
<a href="" class="btn view">더보기</a>
</span>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
<s_cover name='cover-wide-panel'>
<s_cover_item>
<div class="cover-wide-panel">
<div class="bg" style="background-image:url(<s_cover_item_thumbnail></s_cover_item_thumbnail>);"></div>
<div class="box">
<s_cover_item_article_info>
<span class="category"></span>
</s_cover_item_article_info>
<h2></h2>
<p></p>
<a href="" class="btn view">더보기</a>
</div>
</div>
</s_cover_item>
</s_cover>
<s_cover name='cover-thumbnail-list-2'>
<div class="cover-thumbnail-list-2">
<h2></h2>
<ul>
<s_cover_item>
<li>
<a href="">
<span class="thum"><s_cover_item_thumbnail><img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt=""></s_cover_item_thumbnail></span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</li>
</s_cover_item>
</ul>
</div>
</s_cover>
</s_cover_rep>
</s_cover_group>
<s_page_rep>
<div class="hgroup">
<h1></h1>
</div>
<div class="entry-content">
</div>
</s_page_rep>
<s_notice_rep>
<div class="hgroup">
<h1></h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
</div>
</s_notice_rep>
<s_list>
<div class="post-header">
<h2></h2>
<div class="list-type">
<button type="button" class="thum">썸네일형</button>
<button type="button" class="list">리스트형</button>
</div>
</div>
</s_list>
<div class="inner">
<s_article_protected>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum"></span>
<span class="title"></span>
<span class="excerpt">보호되어 있는 글입니다.</span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category">보호글</div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
</div>
</div>
<div class="entry-content">
<form class="protected_form" onsubmit="">
<p>보호되어 있는 글입니다. 내용을 보시려면 비밀번호를 입력하세요.</p>
<input type="password" id="" name="" value="" placeholder="비밀번호" />
<button type="submit" class="btn">확인</button>
</form>
</div>
</s_permalink_article_rep>
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
<div class="post-item">
<a href="">
<span class="thum">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C276x260/?fname=" alt="">
</s_article_rep_thumbnail>
</span>
<span class="title"></span>
<span class="excerpt"></span>
<span class="more">더보기</span>
</a>
</div>
</s_index_article_rep>
<s_permalink_article_rep>
<div class="hgroup">
<div class="category"></div>
<h1> </h1>
<div class="post-meta">
<span class="author"></span>
<span class="date"></span>
<s_ad_div>
<span><a href="">수정</a></span>
<span><a href="#" onclick="">삭제</a></span>
</s_ad_div>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
</div>
</div>
</div>
<div class="entry-content">
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":625431,"template":"carousel","trackingCode":"AF9246913","width":"728","height":"90"});
</script>
</div>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
<s_article_related>
<div class="related-articles">
<h2><strong>''</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C200x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<label for="" class="screen_out">댓글</label>
<textarea id="" name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup tag">
<h2>태그</h2>
</div>
<div class="tags section">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="hgroup guest">
<h2>방명록</h2>
</div>
<div class="comments guest">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
<aside id="aside">
<div class="inner">
<div class="sidebar-1">
<s_sidebar>
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="posts">
<h2>공지사항</h2>
<ul>
<s_rct_notice_rep>
<li><a href="" class="link_board"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근 포스트 -->
<div class="posts">
<h2>최근 포스트</h2>
<ul>
<s_rctps_rep>
<li><a href=""></a></li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-2">
<s_sidebar>
<s_sidebar_element>
<!-- 태그 -->
<div class="tags">
<h2>태그</h2>
<div class="items">
<s_random_tags>
<a href=""></a>
</s_random_tags>
</div>
<a href="/tag" class="more">더보기</a>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-3">
<s_sidebar>
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<h2>검색</h2>
<s_search>
<fieldset>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13 ) { }">
<button type="button" onclick="">검색</button>
</fieldset>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 전체 방문자 -->
<div class="count">
<h2>전체 방문자</h2>
<p class="total"></p>
<ul>
<li><strong>오늘</strong></li>
<li><strong>어제</strong></li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
</div>
</aside>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://zenowo.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "184a543504bb6c0";
if(window.wcs) {
wcs_do();
}
</script>
</body>
</html>
</div>
<s_tag_label>
<div class="tags">
<h2>태그</h2>
<div class="items">
</div>
</div>
</s_tag_label>
<div style="text-align: center;width: 100%;height: 100%;object-fit:contain;">
<script src="https://ads-partners.coupang.com/g.js"></script>
<script>
new PartnersCoupang.G({"id":625431,"template":"carousel","trackingCode":"AF9246913","width":"728","height":"90"});
</script>
</div>
"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."
<s_article_related>
<div class="related-articles">
<h2><strong>'카테고리 없음'</strong> Related Articles</h2>
<ul>
<s_article_related_rep>
<li>
<a href="">
<span class="thum">
<s_article_related_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C200x200/?fname=" alt="">
</s_article_related_rep_thumbnail>
</span>
<span class="title"></span>
</a>
</li>
</s_article_related_rep>
</ul>
</div>
</s_article_related>
<s_rp>
<div class="comments">
<s_rp_container>
<div class="comment-list">
<ul>
<s_rp_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_rp2_container>
<ul>
<s_rp2_rep>
<li id="">
<div class="author-meta">
<img src="" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="">댓글주소</a>
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_rp2_rep>
</ul>
</s_rp2_container>
</li>
</s_rp_rep>
</ul>
</div>
</s_rp_container>
<s_rp_input_form>
<div class="comment-form">
<s_rp_member>
<div class="field">
<s_rp_guest>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_rp_guest>
<div class="secret">
<input type="checkbox" name="" id="secret">
<label for="secret" tabindex="0">Secret</label>
</div>
</div>
</s_rp_member>
<label for="" class="screen_out">댓글</label>
<textarea id="" name="" cols="" rows="4" placeholder="여러분의 소중한 댓글을 입력해주세요."></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">댓글달기</button>
</div>
</div>
</s_rp_input_form>
</div>
</s_rp>
</s_permalink_article_rep>
</s_article_rep>
</div>
<s_tag>
<div class="hgroup tag">
<h2>태그</h2>
</div>
<div class="tags section">
<div class="items">
<s_tag_rep>
<a href=""></a>
</s_tag_rep>
</div>
</div>
</s_tag>
<s_guest>
<div class="hgroup guest">
<h2>방명록</h2>
</div>
<div class="comments guest">
<s_guest_input_form>
<div class="comment-form">
<s_guest_member>
<div class="field">
<s_guest_form>
<input type="text" name="" value="" placeholder="이름">
<input type="password" name="" value="" placeholder="암호">
</s_guest_form>
</div>
</s_guest_member>
<textarea name="" cols="" rows="4"></textarea>
<div class="submit">
<button type="submit" class="btn" onclick="">안부 남기기</button>
</div>
</div>
</s_guest_input_form>
<s_guest_container>
<div class="comment-list">
<ul>
<s_guest_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
<a href="#" onclick="">댓글쓰기</a>
</div>
<s_guest_reply_container>
<ul>
<s_guest_reply_rep>
<li id="">
<div class="author-meta">
<img src="//t1.daumcdn.net/tistory_admin/static/skin/avatar_default.gif" class="avatar" alt="">
<span class="nickname"></span>
<span class="date"></span>
</div>
<p></p>
<div class="control">
<a href="#" onclick="">수정/삭제</a>
</div>
</li>
</s_guest_reply_rep>
</ul>
</s_guest_reply_container>
</li>
</s_guest_rep>
</ul>
</div>
</s_guest_container>
</div>
</s_guest>
<s_paging>
<div class="pagination">
<a class="prev ">이전</a>
<s_paging_rep>
<a ></a>
</s_paging_rep>
<a class="next ">다음</a>
</div>
</s_paging>
</article>
<aside id="aside">
<div class="inner">
<div class="sidebar-1">
<s_sidebar>
<s_sidebar_element>
<!-- 공지사항 -->
<s_rct_notice>
<div class="posts">
<h2>공지사항</h2>
<ul>
<s_rct_notice_rep>
<li><a href="" class="link_board"></a></li>
</s_rct_notice_rep>
</ul>
</div>
</s_rct_notice>
</s_sidebar_element>
<s_sidebar_element>
<!-- 최근 포스트 -->
<div class="posts">
<h2>최근 포스트</h2>
<ul>
<s_rctps_rep>
<li><a href=""></a></li>
</s_rctps_rep>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-2">
<s_sidebar>
<s_sidebar_element>
<!-- 태그 -->
<div class="tags">
<h2>태그</h2>
<div class="items">
<s_random_tags>
<a href=""></a>
</s_random_tags>
</div>
<a href="/tag" class="more">더보기</a>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
<div class="sidebar-3">
<s_sidebar>
<s_sidebar_element>
<!-- 검색 -->
<div class="search">
<h2>검색</h2>
<s_search>
<fieldset>
<label for="" class="screen_out">블로그 내 검색</label>
<input id="" type="text" name="" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13 ) { }">
<button type="button" onclick="">검색</button>
</fieldset>
</s_search>
</div>
</s_sidebar_element>
<s_sidebar_element>
<!-- 전체 방문자 -->
<div class="count">
<h2>전체 방문자</h2>
<p class="total"></p>
<ul>
<li><strong>오늘</strong></li>
<li><strong>어제</strong></li>
</ul>
</div>
</s_sidebar_element>
</s_sidebar>
</div>
</div>
</aside>
</section>
<hr>
<footer id="footer">
<p class="copyright">DESIGN BY <a href="#">TISTORY</a> <a href="https://zenowo.tistory.com/manage" class="admin">관리자</a></p>
</footer>
</div>
<script src="./images/script.js"></script>
</s_t3>
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "184a543504bb6c0";
if(window.wcs) {
wcs_do();
}
</script>
</body>
</html>