타임라인 차트 만드는 방법(JS)
43164 단어 datasciencetutorialjavascriptwebdev
이 자습서를 유용하고 재미있게 만들기 위해 실제 데이터를 사용하기로 결정했습니다. 기업가이자 투자자로서의 그의 경력에서 가장 중요한 사건에 초점을 맞추면서 JS 타임라인 차트에서 단계별로 Elon Musk의 삶을 시각화하는 과정에 저와 함께 하세요.
타임라인 차트 미리보기
튜토리얼을 따라 만들 아름다운 JavaScript 타임라인 차트를 살펴보고 방법을 알아보기 위해 계속 읽으십시오!
기본 JS 타임라인 차트를 작성하는 4단계
대화형 JavaScript 기반 타임라인 차트를 만드는 것은 기본적인 것일지라도 어려운 작업으로 보일 수 있습니다. 하지만 지금은 어떻게 하면 쉽게 할 수 있는지 알게 될 것입니다.
이 튜토리얼에서는 JS 타임라인 차트를 작성하는 프로세스를 웹 페이지 작성, 스크립트 추가, 데이터 설정 및 시각화 구성의 네 단계로 나눕니다.
멋진 기본 타임라인 차트가 이해하기 쉬운 몇 줄의 코드로 정리됩니다. 그런 다음 사용자 정의할 수 있는 방법을 보여 드리겠습니다(역시 복잡하지 않음). 날 따라와!
1. 웹페이지 만들기
먼저 HTML 블록 요소로 간단한 웹 페이지를 만듭니다. 여기에서 JavaScript 기반 타임라인 차트가 표시됩니다.
이 요소에 ID를 제공하고 높이와 무게를 100%로 설정하여 시각화가 전체 페이지를 차지하도록 했습니다.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
2. 스크립트 추가
둘째, 타임라인 차트를 만들 모든 스크립트를 HTML 페이지의
<head> 섹션에 추가합니다.이 자습서에서는 타임라인을 포함하여 AnyChart JS Charts의 데이터를 쉽고 빠르게 시각화할 수 있는 방대한 기본 기능을 갖춘 강력한 JavaScript 차트 라이브러리인 dozens of chart types을 사용합니다.
여기에 Core와 Timelinemodules이 필요합니다.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-timeline.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// All the JS code for the timeline chart will go here.
</script>
</body>
</html>
3. 설정 데이터
셋째, 시각화하고 싶은 데이터를 JS 타임라인 차트에 설정합니다.
범위와 순간의 두 가지 다른 유형의 시리즈가 있습니다. 각각은 별도의 기능을 통해 추가됩니다.
범위 계열은 기간에 대한 것입니다. 각 데이터 포인트에는 시작 및 종료 날짜와 함께 이름이 있습니다.
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
모멘트 시리즈는 개별 이벤트용입니다. 각 데이터 포인트에는 날짜와 텍스트가 있습니다.
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
괜찮은! 페이지, 스크립트 및 데이터가 준비되었습니다. 이제 JavaScript 차트 코드를 추가하여 의도한 대화형 타임라인 차트 시각화를 완성할 차례입니다!
4. 시각화 구성
먼저 이전 단계의 데이터를 추가합니다. 그런 다음 웹 페이지가 이미 로드되었을 때 타임라인 차트를 구성하는 후속 코드가 실행되도록 함수를 사용합니다.
<script>
// set the range series data
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
// set the moment series data
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
anychart.onDocumentReady(function() {
// The (following) timeline charting code lands here.
});
</script>
그런 다음
anychart.onDocumentReady() 함수 내에서 timeline() 함수를 사용하여 타임라인 차트 인스턴스를 생성하고 두 계열을 모두 설정하고 범위 계열 레이블에 name 속성을 표시하도록 합니다.// create a timeline chart
let chart = anychart.timeline();
// create a range series
let rangeSeries = chart.range(rangeData());
// create a moment series
let momentSeries = chart.moment(momentData());
// configure the range series label settings
rangeSeries.labels().format("{%name}");
또한 바로 거기에 몇 줄을 더 추가하여 타임라인 차트의 제목을 지정하고 컨테이너를 정의한 다음 마지막으로 결과 그래픽을 그리도록 명령합니다.
// set the chart title
chart.title("Timeline of Elon Musk");
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
결과: 기본 JS 타임라인 차트
자! 멋진 대화형 JavaScript 타임라인 차트 시각화가 준비되었습니다. 그리고 건물을 짓는 것은 결코 어려운 일이 아니죠, 그렇죠?
다음은 이 타임라인 차트의 전체 코드입니다. AnyChart Playground에서도 사용할 수 있습니다.
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-timeline.min.js"></script>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// set the range series data
function rangeData() {
return [
{
name: "Childhood and Education",
start: "1971/06/28",
end: "1995/09/01"
},
{
name: "Entrepreneur Journey",
start: "1983/06/28",
end: "2002/03/13"
},
{
name: "Making of Tycoon",
start: "2002/03/14",
end: "2010/06/28"
},
{
name: "Rise of Tycoon",
start: "2010/06/29",
end: "2030/01/01"
}
];
}
// set the moment series data
function momentData() {
return [
["1971/06/28", "Elon Musk was born in South Africa"],
["1981/06/28", "Began to learn computer programming on his own"],
["1983/06/28", "Sold the code of his game Blastar for $500"],
["1990/09/01", "Entered Queen's University in Kingston, Ontario"],
["1992/09/01", "Transferred to the University of Pennsylvania"],
["1995/06/01", "Received bachelor's degrees in physics and economics"],
["1995/09/01", "Started a Ph.D. at Stanford (dropped out in 2 days"],
["1995/11/06", "Founded Zip2 with his brother"],
["1999/02/01", "Sold Zip2 to Compaq for $307M"],
["1999/03/01", "Co-founded X.com"],
["2000/03/01", "Merged X.com with Confinity to form PayPal"],
["2001/01/01", "Started conceptualizing Mars Oasis"],
["2002/03/14", "Founded SpaceX & became its CEO"],
["2002/10/03", "Received $175.8M from PayPal's sale to eBay for $1.5B"],
["2004/02/01", "Invested $6.5M in Tesla and joined its board as chairman"],
["2006/01/01", "SpaceX started to get NASA contracts"],
["2008/10/01", "Became CEO at Tesla"],
["2010/06/29", "Tesla's first IPO"],
["2015/12/11", "Co-founded OpenAI"],
["2016/07/01", "Co-founded Neuralink"],
["2018/02/21", "Resigned his board seat at OpenAI"],
["2021/11/06", "Started selling his Tesla stock (10% for $16.4B by year end)"],
["2022/04/13", "Made an offer to buy Twitter"],
["2022/07/08", "Withdrew his $44B bid to buy Twitter"]
];
}
anychart.onDocumentReady(function () {
// create a timeline chart
let chart = anychart.timeline();
// create a range series
let rangeSeries = chart.range(rangeData());
// create a moment series
let momentSeries = chart.moment(momentData());
// configure the range series label settings
rangeSeries.labels().format("{%name}");
// set the chart title
chart.title("Timeline of Elon Musk");
// set the chart container id
chart.container("container");
// draw the chart
chart.draw();
});
</script>
</body>
</html>
커스텀 JS 타임라인 차트 만들기
타임 라인은 그대로 흥미로워 보입니다. 그러나 항상 개선의 여지가 있습니다! 이러한 JavaScript 타임라인 차트의 일부를 큰 번거로움 없이 멋지게 사용자 정의할 수 있는 방법을 보여 드리겠습니다.
이러한 JS 타임라인 차트 사용자 지정에 대한 자세한 내용은 계속 읽으십시오HERE.
Reference
이 문제에 관하여(타임라인 차트 만드는 방법(JS)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/andreykh1985/how-to-make-timeline-chart-in-js-4023텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
