AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
AnyChar HTML5圖表高度可定制且高度兼容。擁有純JavaScript API，AnyChart圖表內置客戶端數據實時更新，多層次向下鉆區和具體參數更新。強大的主題引擎使你通過一系列圖表進行獨特的演示體驗，而PDF和圖像輸出能產出圖書質量打印文檔。
點擊下載AnyChart最新版
我認為我們所有人都在某個地方遇到過時間線；作為傳達時間順序信息的一種方式，經典的時間線在傳達信息的深度和“酷”因素方面都是無與倫比的，當以靈巧的創意觸摸完成時。那么，話雖如此，您是否想學習如何使用 JavaScript 構建一個既美觀又易于創建的時間線圖表？跟著我一起來，我會通過一個實際的例子帶你一步一步地開發你自己的 JS 時間線。
隨著世界繼續與 COVID-19 作斗爭，人們期待已久的好消息是全球疫苗的開發。在這里，我決定建立一個互動時間表，展示輝瑞-BioNTech 疫苗在美國的開發階段。為了添加更多上下文信息，我還想展示其他國家/地區的批準情況和一些相關事實，包括在美國批準使用的其他 3 種疫苗的開發日期。
最終，成品是這樣的：
分 4 步構建基本的 JavaScript 時間線圖
即使沒有太多的技術知識，創建圖表和可視化數據實際上也很容易。當然，如果您具有 HTML 和 JavaScript 等技術的技能，則更容易掌握正在發生的事情，并且可以更快地安排更廣泛的自定義。盡管如此，使用可用的JS 圖表庫之一進行數據可視化相當簡單。所以，不用擔心任何錯誤（好吧，不幸的是，我們不得不擔心病毒），讓我們第一次嘗試使用 JavaScript 創建時間線。
首先要了解的是，并非所有 JavaScript 圖表庫都支持時間線圖表。所以從邏輯上講，首先要做的是找到一個這樣做的。在本教程中，我決定使用AnyChart，因為它支持開箱即用的時間線，而且重量輕、靈活且易于使用，提供了大量文檔和一個有助于練習代碼的專用操場。所有這些都應該幫助您了解該過程的基礎知識，無論您選擇哪個特定庫，這些基礎知識往往都非常相似。
創建任何 JS 圖表有 4 個基本步驟，包括 JS 時間線圖表。他們是：
-
制作一個基本的 HTML 頁面。
-
參考所有必要的腳本。
-
添加數據。
-
編寫一些JS代碼來配置時間線圖表。
1. 制作一個基本的 HTML 頁面
首先，我們必須建立一個基本的 HTML 頁面。這包括開發可視化框架以及添加必要的 CSS 規則。
一個基本的 HTML 模板包含在html標簽中，包含 2 個部分——ahead和 a body。頁面標題以及 CSS 鏈接和 JS 腳本都包含在該head部分中。正文部分定義了html頁面的各種組件。定義頁面部分的基本方法之一是div在 HTML 中使用標記。
在這里，我創建了一個div包含時間線圖表的對象，并為其指定一個標識該特定容器的 ID。我在寬度和高度參數中都設置了“100%”，以使時間線可視化占據整個頁面。
<!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>部分中引用。對于本教程，由于我使用的是 AnyChart 庫，因此我將包含其CDN（內容交付網絡）中的相應文件。
要創建時間線圖表，我需要從 AnyChart添加對核心庫模塊的引用，這對于所有類型的圖表以及特殊的時間線模塊都是必需的。
<!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. 添加數據
第三，讓我們添加數據。我通過從各種新聞來源編譯我想要的內容，手動為這個時間線圖表教程創建了一個數據集，其中兩個主要是NYT和Bloomberg。如果您有興趣，我的 JSON 數據文件在這里。
在數據適配器模塊的幫助下可以在 AnyChart 中加載 JSON 文件，我將其與<head>. 接下來，我使用HTML 頁面正文中標記loadJsonFile內的方法<script>來加載數據文件。
<!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>
現在所有準備工作都完成了，準備添加代碼，以立即創建交互式 JS 時間軸圖表！
4.編寫一些JS代碼來配置時間線圖表
以這種方式創建任何圖表的第一個基本步驟是添加一個包含所有代碼的函數，以確保其中的整個代碼僅在頁面準備好后才會執行。
我在這里創建的時間線圖由 3 部分組成：
-
以時間間隔顯示輝瑞-BioNTech 疫苗開發階段在美國的中心時間線，
-
將與輝瑞-BioNTech 疫苗相關的事件作為里程碑來指示的時間范圍之上的時間范圍，以及
-
時間線下方的標記代表在美國被批準為里程碑的其他疫苗的開發階段日期。
創建中央時間線非常簡單，但在處理時間線上方和下方的點時可能會有些不知所措。不過不要擔心，因為所有代碼都已注釋，我將帶您瀏覽每個代碼片段。
對于中心部分，我需要做的就是使用內置功能初始化時間線圖表對象并將點設置為范圍系列。
// 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);
現在我只需要將時間線的比例設置為 1 個月并添加一個滾動條，以允許查看時間線的特定部分。
// 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();
就是這樣！功能齊全的交互式時間軸圖表已全部設置完畢！
歡迎您在CodePen [或AnyChart Playground ]上查看和使用帶有完整 JS/CSS/HTML 代碼的交互式時間線圖表的初始版本。
<!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 時間線圖
像 AnyChart 這樣的 JavaScript 庫不僅簡化了創建基礎可視化的過程，而且還提供了輕松定制的選項。通過一些代碼調整（或更多），如果您愿意，您可以對圖表進行一些快速有效的更改。
時間線的顏色和標記
使圖表看起來個性化的簡單定制就是改變顏色。由于開發階段包括試驗、審查和批準，我使用了紅色到綠色的色譜——交通信號顏色。我還更改了頂級系列的標記顏色，并為它使用了輝瑞的標志性藍色。
// 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");
由于底部系列包含三種不同疫苗的信息，我為所有三種疫苗創建了不同的系列，然后自動為每個系列分配不同的標記。
工具提示自定義
此外，我想為時間線中的每個數據點顯示更多信息，因此我將其作為交互功能添加到圖表工具提示中，包括對外觀進行一些自定義。
// 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>'
);
文本標記和標題
時間線看起來差不多準備好了，所以是時候進行最后的潤色了。我將格式化標題并添加副標題以使其看起來更好。然后，我將為中央時間線上方和下方的不同系列添加文本標記，以便事件更具解釋性。
// 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);
在這個循序漸進的教程中，我展示了獲取 JS 時間線圖表是多么容易，不僅僅是啟動和運行，還有如何將它變為現實。時間線有很多自定義選項，您可以通過此處的文檔繼續探索。借助良好的 JS 庫，可以輕松創建多功能和交互式 JavaScript 圖表。您可以查看各種其他圖表選項或嘗試使用其他 JavaScript 圖表庫來滿足您的數據可視化需求。
請隨時問我任何問題或讓我知道您自己的 JS 時間線結果如何。保持安全并及時注射疫苗以對抗這種流行病！
相關產品推薦：
AnyGantt——構建復雜且內容豐富的甘特圖的理想工具
AnyStock——基于XML/JSON的Flash金融圖表解決方案
AnyMap——可交互式地圖
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
19次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線