AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內(nèi)置客戶端數(shù)據(jù)實(shí)時(shí)更新，多層次向下鉆區(qū)和具體參數(shù)更新。強(qiáng)大的主題引擎使你通過(guò)一系列圖表進(jìn)行獨(dú)特的演示體驗(yàn)，而PDF和圖像輸出能產(chǎn)出圖書質(zhì)量打印文檔。
點(diǎn)擊下載AnyChart最新版
我認(rèn)為我們所有人都在某個(gè)地方遇到過(guò)時(shí)間線；作為傳達(dá)時(shí)間順序信息的一種方式，經(jīng)典的時(shí)間線在傳達(dá)信息的深度和“酷”因素方面都是無(wú)與倫比的，當(dāng)以靈巧的創(chuàng)意觸摸完成時(shí)。那么，話雖如此，您是否想學(xué)習(xí)如何使用 JavaScript 構(gòu)建一個(gè)既美觀又易于創(chuàng)建的時(shí)間線圖表？跟著我一起來(lái)，我會(huì)通過(guò)一個(gè)實(shí)際的例子帶你一步一步地開發(fā)你自己的 JS 時(shí)間線。
隨著世界繼續(xù)與 COVID-19 作斗爭(zhēng)，人們期待已久的好消息是全球疫苗的開發(fā)。在這里，我決定建立一個(gè)互動(dòng)時(shí)間表，展示輝瑞-BioNTech 疫苗在美國(guó)的開發(fā)階段。為了添加更多上下文信息，我還想展示其他國(guó)家/地區(qū)的批準(zhǔn)情況和一些相關(guān)事實(shí)，包括在美國(guó)批準(zhǔn)使用的其他 3 種疫苗的開發(fā)日期。
最終，成品是這樣的：
分 4 步構(gòu)建基本的 JavaScript 時(shí)間線圖
即使沒有太多的技術(shù)知識(shí)，創(chuàng)建圖表和可視化數(shù)據(jù)實(shí)際上也很容易。當(dāng)然，如果您具有 HTML 和 JavaScript 等技術(shù)的技能，則更容易掌握正在發(fā)生的事情，并且可以更快地安排更廣泛的自定義。盡管如此，使用可用的JS 圖表庫(kù)之一進(jìn)行數(shù)據(jù)可視化相當(dāng)簡(jiǎn)單。所以，不用擔(dān)心任何錯(cuò)誤（好吧，不幸的是，我們不得不擔(dān)心病毒），讓我們第一次嘗試使用 JavaScript 創(chuàng)建時(shí)間線。
首先要了解的是，并非所有 JavaScript 圖表庫(kù)都支持時(shí)間線圖表。所以從邏輯上講，首先要做的是找到一個(gè)這樣做的。在本教程中，我決定使用AnyChart，因?yàn)樗С珠_箱即用的時(shí)間線，而且重量輕、靈活且易于使用，提供了大量文檔和一個(gè)有助于練習(xí)代碼的專用操場(chǎng)。所有這些都應(yīng)該幫助您了解該過(guò)程的基礎(chǔ)知識(shí)，無(wú)論您選擇哪個(gè)特定庫(kù)，這些基礎(chǔ)知識(shí)往往都非常相似。
創(chuàng)建任何 JS 圖表有 4 個(gè)基本步驟，包括 JS 時(shí)間線圖表。他們是：
-
制作一個(gè)基本的 HTML 頁(yè)面。
-
參考所有必要的腳本。
-
添加數(shù)據(jù)。
-
編寫一些JS代碼來(lái)配置時(shí)間線圖表。
1. 制作一個(gè)基本的 HTML 頁(yè)面
首先，我們必須建立一個(gè)基本的 HTML 頁(yè)面。這包括開發(fā)可視化框架以及添加必要的 CSS 規(guī)則。
一個(gè)基本的 HTML 模板包含在html標(biāo)簽中，包含 2 個(gè)部分——ahead和 a body。頁(yè)面標(biāo)題以及 CSS 鏈接和 JS 腳本都包含在該head部分中。正文部分定義了html頁(yè)面的各種組件。定義頁(yè)面部分的基本方法之一是div在 HTML 中使用標(biāo)記。
在這里，我創(chuàng)建了一個(gè)div包含時(shí)間線圖表的對(duì)象，并為其指定一個(gè)標(biāo)識(shí)該特定容器的 ID。我在寬度和高度參數(shù)中都設(shè)置了“100%”，以使時(shí)間線可視化占據(jù)整個(gè)頁(yè)面。
<!DOCTYPE html>
<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. 參考所有必要的腳本
其次，所有必要的 JS 腳本都需要在該<head>部分中引用。對(duì)于本教程，由于我使用的是 AnyChart 庫(kù)，因此我將包含其CDN（內(nèi)容交付網(wǎng)絡(luò)）中的相應(yīng)文件。
要?jiǎng)?chuàng)建時(shí)間線圖表，我需要從 AnyChart添加對(duì)核心庫(kù)模塊的引用，這對(duì)于所有類型的圖表以及特殊的時(shí)間線模塊都是必需的。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.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 come here.
</script>
</body>
</html>
3. 添加數(shù)據(jù)
第三，讓我們添加數(shù)據(jù)。我通過(guò)從各種新聞來(lái)源編譯我想要的內(nèi)容，手動(dòng)為這個(gè)時(shí)間線圖表教程創(chuàng)建了一個(gè)數(shù)據(jù)集，其中兩個(gè)主要是NYT和Bloomberg。如果您有興趣，我的 JSON 數(shù)據(jù)文件在這里。
在數(shù)據(jù)適配器模塊的幫助下可以在 AnyChart 中加載 JSON 文件，我將其與<;head>. 接下來(lái)，我使用HTML 頁(yè)面正文中標(biāo)記loadJsonFile內(nèi)的方法<script>來(lái)加載數(shù)據(jù)文件。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-timeline.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.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>
anychart.data.loadJsonFile('{JSON data file location}',
function (data) {
// Timeline chart's JS code will come here.
});
</script>
</body>
</html>
現(xiàn)在所有準(zhǔn)備工作都完成了，準(zhǔn)備添加代碼，以立即創(chuàng)建交互式 JS 時(shí)間軸圖表！
4.編寫一些JS代碼來(lái)配置時(shí)間線圖表
以這種方式創(chuàng)建任何圖表的第一個(gè)基本步驟是添加一個(gè)包含所有代碼的函數(shù)，以確保其中的整個(gè)代碼僅在頁(yè)面準(zhǔn)備好后才會(huì)執(zhí)行。
我在這里創(chuàng)建的時(shí)間線圖由 3 部分組成：
-
以時(shí)間間隔顯示輝瑞-BioNTech 疫苗開發(fā)階段在美國(guó)的中心時(shí)間線，
-
將與輝瑞-BioNTech 疫苗相關(guān)的事件作為里程碑來(lái)指示的時(shí)間范圍之上的時(shí)間范圍，以及
-
時(shí)間線下方的標(biāo)記代表在美國(guó)被批準(zhǔn)為里程碑的其他疫苗的開發(fā)階段日期。
創(chuàng)建中央時(shí)間線非常簡(jiǎn)單，但在處理時(shí)間線上方和下方的點(diǎn)時(shí)可能會(huì)有些不知所措。不過(guò)不要擔(dān)心，因?yàn)樗写a都已注釋，我將帶您瀏覽每個(gè)代碼片段。
對(duì)于中心部分，我需要做的就是使用內(nèi)置功能初始化時(shí)間線圖表對(duì)象并將點(diǎn)設(shè)置為范圍系列。
// create a timeline chart
var chart = anychart.timeline();
// create main timeline data points
for (var i = 0; i < data.pfizerTimeline.length; i++) {
// create a range series
var series = chart.range([
[
data.pfizerTimeline[i].title,
data.pfizerTimeline[i].start,
data.pfizerTimeline[i].end
]
]);
}
為了繪制時(shí)間軸點(diǎn)的上方和下方，我初始化數(shù)據(jù)集，定義點(diǎn)的映射，并使用矩系列功能設(shè)置兩個(gè)系列。
// create a data set for the top data points
var pfizerDataSet = anychart.data.set(data.pfizerFacts);
// map the top data points
var pfizerMapping = pfizerDataSet.mapAs({
x: 'date',
value: 'title'
});
// create the top series with moments
var pfizerMappingSeries = chart.moment(pfizerMapping);
// create a data set for the bottom data points
var otherVaccinesDataset = anychart.data.set(data.otherVaccines);
// map the bottom data set
var otherVaccinesDatasetMapping = otherVaccinesDataset.mapAs({
x: 'date',
value: 'title'
});
// create the bottom series with moments
var otherVaccinesSeries = chart.moment(otherVaccinesDatasetMapping);
現(xiàn)在我只需要將時(shí)間線的比例設(shè)置為 1 個(gè)月并添加一個(gè)滾動(dòng)條，以允許查看時(shí)間線的特定部分。
// set the chart scale levels
chart.scale().zoomLevels([
[
{ unit: 'month', count: 1 }
]
]);
// enable the chart scroller
chart.scroller().enabled(true);
最后，我為圖表添加了一個(gè)標(biāo)題，設(shè)置了為圖表定義的容器，并繪制了實(shí)際的時(shí)間線。
// set the chart's title
chart.title('Pfizer/BioNTech Vaccine Timeline');
// set the container id for the chart
chart.container('container');
// initiate the chart drawing
chart.draw();
就是這樣！功能齊全的交互式時(shí)間軸圖表已全部設(shè)置完畢！
歡迎您在CodePen [或AnyChart Playground ]上查看和使用帶有完整 JS/CSS/HTML 代碼的交互式時(shí)間線圖表的初始版本。
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Timeline Chart</title>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-timeline.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.9.0/js/anychart-data-adapter.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>
anychart.onDocumentReady(function () {
anychart.data.loadJsonFile(
'//gist.githubusercontent.com/shacheeswadia/c65106bb00db4236140b4f6052fde55a/raw/9ec2af927a8bb81433f2236b41c161260aa4950d/pfizer-comparison-timeline',
function (data) {
// create a timeline chart
var chart = anychart.timeline();
// create main timeline data points
for (var i = 0; i < data.pfizerTimeline.length; i++) {
// create a range series
var series = chart.range([
[
data.pfizerTimeline[i].title,
data.pfizerTimeline[i].start,
data.pfizerTimeline[i].end
]
]);
}
// create a data set for the top data points
var pfizerDataSet = anychart.data.set(data.pfizerFacts);
// map the top data points
var pfizerMapping = pfizerDataSet.mapAs({
x: 'date',
value: 'title'
});
// create the top series with moments
var pfizerMappingSeries = chart.moment(pfizerMapping);
// create a data set for the bottom data points
var otherVaccinesDataset = anychart.data.set(data.otherVaccines);
// map the bottom data set
var otherVaccinesDatasetMapping = otherVaccinesDataset.mapAs({
x: 'date',
value: 'title'
});
// create the bottom series with moments
var otherVaccinesSeries = chart.moment(otherVaccinesDatasetMapping);
// set the chart scale levels
chart.scale().zoomLevels([
[
{ unit: 'month', count: 1 }
]
]);
// enable the chart scroller
chart.scroller().enabled(true);
// set the chart's title
chart.title('PFizer/BioNTech Vaccine Timeline');
// set the container id for the chart
chart.container('container');
// initiate the chart drawing
chart.draw();
}
);
});
</script>
</body>
</html>
自定義 JS 時(shí)間線圖
像 AnyChart 這樣的 JavaScript 庫(kù)不僅簡(jiǎn)化了創(chuàng)建基礎(chǔ)可視化的過(guò)程，而且還提供了輕松定制的選項(xiàng)。通過(guò)一些代碼調(diào)整（或更多），如果您愿意，您可以對(duì)圖表進(jìn)行一些快速有效的更改。
時(shí)間線的顏色和標(biāo)記
使圖表看起來(lái)個(gè)性化的簡(jiǎn)單定制就是改變顏色。由于開發(fā)階段包括試驗(yàn)、審查和批準(zhǔn)，我使用了紅色到綠色的色譜——交通信號(hào)顏色。我還更改了頂級(jí)系列的標(biāo)記顏色，并為它使用了輝瑞的標(biāo)志性藍(lán)色。
// create main timeline data points
for (var i = 0; i < data.pfizerTimeline.length; i++) {
// create a range series
var series = chart.range([
[
data.pfizerTimeline[i].title,
data.pfizerTimeline[i].start,
data.pfizerTimeline[i].end
]
])
// using function and if conditions to color the timeline parts according to the phase
.fill(function(d){
// red color for the trial phase
if(d.name == "Pfizer/BioNTech Trial"){
return "#FD8060"
}else if(d.name == "Review"){ // yellow color for the review phase
return "#FEE191"
}
return "#B0D8A4" // green color for the approval phase
})
.stroke("none");
}
...
// customize the markers
pfizerMappingSeries.normal().markers().fill("#007cc2");
由于底部系列包含三種不同疫苗的信息，我為所有三種疫苗創(chuàng)建了不同的系列，然后自動(dòng)為每個(gè)系列分配不同的標(biāo)記。
工具提示自定義
此外，我想為時(shí)間線中的每個(gè)數(shù)據(jù)點(diǎn)顯示更多信息，因此我將其作為交互功能添加到圖表工具提示中，包括對(duì)外觀進(jìn)行一些自定義。
// set the tooltip settings for the main timeline series
series
.tooltip()
.useHtml(true)
.titleFormat('{%x}') // the event title
.format(
// the description field in the data contains additonal information
data.pfizerTimeline[i].description
// using breakline (<br>) tag to add space, bold (<b>) tag to emphasize
// indicating the start and end of each timeline phase with start and end data fields
+ '<br/><br/>Start: <b>{%start}{type:date}</b><br/>End: <b>{%end}{type:date}</b>'
);
文本標(biāo)記和標(biāo)題
時(shí)間線看起來(lái)差不多準(zhǔn)備好了，所以是時(shí)候進(jìn)行最后的潤(rùn)色了。我將格式化標(biāo)題并添加副標(biāo)題以使其看起來(lái)更好。然后，我將為中央時(shí)間線上方和下方的不同系列添加文本標(biāo)記，以便事件更具解釋性。
// set the chart's title
chart
.title()
.enabled(true)
.useHtml(true)
.text(
'<span style = "color: #007cc2; font-size:20px;">PFizer/BioNTech Vaccine Timeline</span>' +
'<br/><span style="font-size: 16px;">(Comparing with other vaccines approved in USA)</span>'
);
...
// create two text markers
var textMarker1 = chart.textMarker(0);
var textMarker2 = chart.textMarker(1);
// set the values of the markers
textMarker1.value(data.pfizerTimeline[0].start);
textMarker2.value(data.pfizerTimeline[0].start);
// set the text of the markers
textMarker1.useHtml(true);
textMarker1.text(
"Facts about Pfizer");
textMarker2.text(
"Facts about other vaccines in USA");
// configure the position of the markers
textMarker1.anchor("leftcenter");
textMarker2.anchor("leftcenter");
textMarker1.rotation(0);
textMarker1.offsetY(160);
textMarker2.rotation(0);
textMarker2.offsetY(300);
// configure the font of the markers
textMarker1.fontColor("#007cc2");
textMarker1.fontWeight(600);
textMarker2.fontWeight(600);
在這個(gè)循序漸進(jìn)的教程中，我展示了獲取 JS 時(shí)間線圖表是多么容易，不僅僅是啟動(dòng)和運(yùn)行，還有如何將它變?yōu)楝F(xiàn)實(shí)。時(shí)間線有很多自定義選項(xiàng)，您可以通過(guò)此處的文檔繼續(xù)探索。借助良好的 JS 庫(kù)，可以輕松創(chuàng)建多功能和交互式 JavaScript 圖表。您可以查看各種其他圖表選項(xiàng)或嘗試使用其他 JavaScript 圖表庫(kù)來(lái)滿足您的數(shù)據(jù)可視化需求。
請(qǐng)隨時(shí)問我任何問題或讓我知道您自己的 JS 時(shí)間線結(jié)果如何。保持安全并及時(shí)注射疫苗以對(duì)抗這種流行病！
相關(guān)產(chǎn)品推薦：
AnyGantt——構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購(gòu)買AnyChart正版授權(quán)，或了解更多產(chǎn)品信息請(qǐng)點(diǎn)擊
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請(qǐng)務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請(qǐng)郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線