AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創(chuàng)建跨瀏覽器和跨平臺(tái)的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤(pán)、報(bào)表、數(shù)據(jù)分析、統(tǒng)計(jì)學(xué)、金融等領(lǐng)域。
點(diǎn)擊下載AnyChart正式版
堆疊的面積圖是經(jīng)典面積圖的一種變體，是一種非常流行的數(shù)據(jù)可視化形式。它們非常適合以圖形方式表示多個(gè)變量及其總數(shù)如何隨時(shí)間變化。在本教程中，我將向您展示如何輕松地創(chuàng)建交互式JavaScript堆疊面積圖，該圖在任何HTML5項(xiàng)目、網(wǎng)站或應(yīng)用中都具有吸引力。
為了演示這種方法，即使您僅具備基本的HTML編碼技能，這也很容易掌握，我將以可視化的方式顯示有關(guān)意大利爆發(fā)COVID-19大流行的官方數(shù)據(jù)。教程中建立的可視化文件將顯示病例、康復(fù)和死亡人數(shù)的變化-從1月31日（確認(rèn)前兩個(gè)病例）到6月9日，意大利的新冠病毒病例總數(shù)已達(dá)到235,561。
構(gòu)建JS堆積面積圖的4個(gè)步驟
任何JavaScript圖形（包括堆積面積圖）的開(kāi)發(fā)都可以分為以下四個(gè)基本步驟：
-
為圖表創(chuàng)建一個(gè)HTML頁(yè)面。
-
添加必要的JavaScript文件。
-
設(shè)置數(shù)據(jù)。
-
編寫(xiě)圖表的JS代碼。
讓我們開(kāi)始制作一個(gè)基于值的基本JS堆疊面積圖。然后，我將向您展示如何自定義它以適合您自己的需求和任務(wù)。最終的數(shù)據(jù)可視化示例將是以下JavaScript百分比堆疊面積圖：
現(xiàn)在，讓我們開(kāi)始吧！
步驟1：建立HTML網(wǎng)頁(yè)
首先創(chuàng)建一個(gè)基本的HTML頁(yè)面。該頁(yè)面應(yīng)包含以下內(nèi)容：
-
相關(guān)標(biāo)題。
-
一個(gè)HTML塊元素（例如<div>）將存儲(chǔ)您的圖表。
-
<div>的id屬性（例如，“容器”）。
請(qǐng)注意，您還可以在<style>塊中添加CSS規(guī)則，以修改堆積面積圖將占據(jù)的空間。如果您希望圖形填充整個(gè)頁(yè)面，請(qǐng)對(duì)width和height參數(shù)使用100％。
HTML頁(yè)面應(yīng)如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Stacked Area Chart</title>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>
步驟2：添加必要的JavaScript文件
現(xiàn)在，您應(yīng)該在<head>部分中引用所有必需的JS文件。
我將在本教程中向您展示的堆積面積圖基于AnyChart的JS庫(kù)。通常，JavaScript庫(kù)使您可以更快、更輕松地生成所需的輸出。AnyChart輕巧靈活，因此您可以發(fā)揮自己的創(chuàng)意，并提供功能齊全且響應(yīng)迅速的圖表以在您的網(wǎng)站或應(yīng)用程序上使用。
對(duì)于本圖表教程，我將包括相應(yīng)的CDN鏈接。如果愿意，可以在本地下載腳本。
AnyChart JavaScript庫(kù)具有模塊化系統(tǒng)，有助于優(yōu)化網(wǎng)頁(yè)上運(yùn)行的JS代碼的大小。要使用它制作堆積面積圖，請(qǐng)?zhí)砑觾蓚€(gè)模塊：“Core”和“Basic Cartesian”。第一個(gè)是使用任何其他模塊所需的基本AnyChart模塊。第二個(gè)模塊為所有Cartesian圖表提供動(dòng)力。
這是到目前為止的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<title>
Stacked Area Chart</title>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// The stacked area chart's JS code will be written here.
</script>
</body>
</html>
步驟3：添加數(shù)據(jù)以可視化
加載數(shù)據(jù)
COVID-19大流行是全球頭號(hào)新聞。在本教程中，我決定重點(diǎn)關(guān)注意大利，這是中國(guó)以外的第一個(gè)受到此次危機(jī)嚴(yán)重影響的地區(qū)。我將可視化數(shù)據(jù)與活躍病例、康復(fù)和死亡人數(shù)之間的關(guān)系，以了解從意大利疫情爆發(fā)到現(xiàn)在的情況。
我從Johns Hopkins CSSE 數(shù)據(jù)集中獲取了數(shù)據(jù)，該數(shù)據(jù)被認(rèn)為是COVID-19官方統(tǒng)計(jì)的可靠來(lái)源。為了簡(jiǎn)單起見(jiàn)，我將意大利語(yǔ)數(shù)據(jù)放在一個(gè)CSV文件中，您可以在此處找到。有效病例是通過(guò)從確診病例中減去死亡和康復(fù)來(lái)計(jì)算的。
可以在數(shù)據(jù)適配器模塊的幫助下將CSV文件加載到 AnyChart中，除了已經(jīng)在其中引用的庫(kù)腳本之外，您還應(yīng)該在<head>部分中引用該模塊：
<!DOCTYPE html>
<html>
<head>
<title>Stacked Area Chart</title>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
// The stacked area chart's JS code will be written here.
</script>
</body>
</html>
現(xiàn)在，您可以使用數(shù)據(jù)適配器提供的loadCsvFile方法來(lái)加載CSV數(shù)據(jù)。
anychart.data.loadCsvFile ("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
});
然后，將數(shù)據(jù)設(shè)置為可以在將來(lái)的基于JavaScript的堆積面積圖中使用：
anychart.data.loadCsvFile ("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
// set the data and ignore the first row that contains headers
var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
});
映射數(shù)據(jù)
該圖表將顯示來(lái)自三個(gè)字段的數(shù)據(jù)：活動(dòng)案例，恢復(fù)和死亡。因此，您將需要三個(gè)不同的數(shù)據(jù)系列，每個(gè)字段一個(gè)。但是，您將如何“告知”圖表每個(gè)字段要使用哪些數(shù)據(jù)？
這是數(shù)據(jù)映射起作用的地方！通過(guò)調(diào)用mapAs方法觀(guān)察如何在代碼中實(shí)現(xiàn)這一點(diǎn)：
// map data for the deaths series
var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
步驟4：為圖表編寫(xiě)JS代碼
現(xiàn)在一切似乎都準(zhǔn)備就緒，您就可以開(kāi)始編寫(xiě)JS堆疊面積圖可視化代碼了。
首先，添加anychart.onDocumentReady函數(shù)，該函數(shù)將封裝圖表的全部代碼，并在頁(yè)面準(zhǔn)備好后執(zhí)行。
<script>
anychart.onDocumentReady(function () {
// The stacked area chart's code will be written here.
});
</script>
接下來(lái)，添加步驟3中的數(shù)據(jù)：
<script>
anychart.onDocumentReady(function () {
anychart.data.loadCsvFile ("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
// set the data and ignore the first row that contains headers
var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
});
});
</script>
然后，指定圖表類(lèi)型，設(shè)置序列并強(qiáng)制圖表按Y比例堆疊值：
// specify the area chart type
var chart = anychart.area();
// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
chart.yScale().stackMode('value');
為了清楚起見(jiàn)，讓我們?yōu)槠涿⒚渥鴺?biāo)軸：
// set the chart title
chart.title('Covid-19 in Italy');
// set the labels of the axes
chart.xAxis().title("Date");
chart.yAxis().title("Number of people");
還有一件事：我還想添加一條垂直線(xiàn)，該垂直線(xiàn)將隨鼠標(biāo)移動(dòng)，這將使人們更容易一目了然。在AnyChart中，只需使用十字線(xiàn)功能。以下代碼顯示了如何啟用十字準(zhǔn)線(xiàn)以及一些其他樣式：
// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
.yStroke(null)
.xStroke('#fff')
.zIndex(39);
crosshair.yLabel().enabled(false);
最后，將圖表放入容器中并使用繪圖命令來(lái)繪制圖表。
// set the container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
享受結(jié)果：
通過(guò)輸出可以了解活動(dòng)案例、恢復(fù)和死亡的數(shù)量如何隨時(shí)間變化?？倲?shù)為所有確診病例。您可以將鼠標(biāo)移到圖表上并查看每個(gè)點(diǎn)的確切值。注意十字準(zhǔn)線(xiàn)如何幫助您了解每天的信息！
為了您的方便，完整代碼如下。隨時(shí)在AnyChart Playground上玩這個(gè)基本的JS堆積面積圖。
<!DOCTYPE html>
<html>
<head>
<title>Stacked Area Chart</title>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script>
<script src="http://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script>
<style>
html,
body,
#container {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
anychart.onDocumentReady(function () {
anychart.data.loadCsvFile("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
// set the data and ignore the first row that contains headers
var dataSet = anychart.data.set(data, {ignoreFirstRow: true});
// map data for the deaths series
var deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });
// map data for the recovered series
var recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });
// map data for the active series
var activeData = dataSet.mapAs({ 'x': 0, 'value': 4 });
// specify the chart type
var chart = anychart.area();
// create a series with the mapped active data
var actSeries = chart.splineArea(activeData);
// create a series with the mapped recovered data
var recSeries = chart.splineArea(recoveredData);
// create a series with the mapped deaths data
var deathsSeries = chart.splineArea(deathsData);
// force the chart to stack values by the y scale
chart.yScale().stackMode('value');
// set the chart title
chart.title('Covid-19 in Italy');
// set the labels of the axes
chart.xAxis().title("Date");
chart.yAxis().title("Number of people");
// turn on the crosshair
var crosshair = chart.crosshair();
crosshair.enabled(true)
.yStroke(null)
.xStroke('#fff')
.zIndex(39);
crosshair.yLabel().enabled(false);
// set the container id for the chart
chart.container('container');
// initiate chart drawing
chart.draw();
});
});
</script>
</body>
</html>
本教程內(nèi)容尚未完結(jié)，敬請(qǐng)期待后續(xù)更新內(nèi)容！
想要購(gòu)買(mǎi)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@ke049m.cn
文章轉(zhuǎn)載自：
半島外圍網(wǎng)上直營(yíng) 
11次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
半島外圍網(wǎng)上直營(yíng)相關(guān)的文章 
微信
在線(xiàn)咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線(xiàn)