AnyChart是基于JavaScript (HTML5) 的圖表控件。使用AnyChart控件，可創建跨瀏覽器和跨平臺的交互式圖表和儀表。AnyChart 圖表目前已被很多知名大公司所使用，可用于儀表盤、報表、數據分析、統計學、金融等領域。
點擊下載AnyChart正式版
堆疊的面積圖是經典面積圖的一種變體，是一種非常流行的數據可視化形式。它們非常適合以圖形方式表示多個變量及其總數如何隨時間變化。在本教程中，我將向您展示如何輕松地創建交互式JavaScript堆疊面積圖，該圖在任何HTML5項目、網站或應用中都具有吸引力。
為了演示這種方法，即使您僅具備基本的HTML編碼技能，這也很容易掌握，我將以可視化的方式顯示有關意大利爆發COVID-19大流行的官方數據。教程中建立的可視化文件將顯示病例、康復和死亡人數的變化-從1月31日（確認前兩個病例）到6月9日，意大利的新冠病毒病例總數已達到235,561。
構建JS堆積面積圖的4個步驟
任何JavaScript圖形（包括堆積面積圖）的開發都可以分為以下四個基本步驟：
-
為圖表創建一個HTML頁面。
-
添加必要的JavaScript文件。
-
設置數據。
-
編寫圖表的JS代碼。
讓我們開始制作一個基于值的基本JS堆疊面積圖。然后，我將向您展示如何自定義它以適合您自己的需求和任務。最終的數據可視化示例將是以下JavaScript百分比堆疊面積圖：
現在，讓我們開始吧！
步驟1：建立HTML網頁
首先創建一個基本的HTML頁面。該頁面應包含以下內容：
-
相關標題。
-
一個HTML塊元素（例如<div>）將存儲您的圖表。
-
<div>的id屬性（例如，“容器”）。
請注意，您還可以在<style>塊中添加CSS規則，以修改堆積面積圖將占據的空間。如果您希望圖形填充整個頁面，請對width和height參數使用100％。
HTML頁面應如下所示：
<!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文件
現在，您應該在<head>部分中引用所有必需的JS文件。
我將在本教程中向您展示的堆積面積圖基于AnyChart的JS庫。通常，JavaScript庫使您可以更快、更輕松地生成所需的輸出。AnyChart輕巧靈活，因此您可以發揮自己的創意，并提供功能齊全且響應迅速的圖表以在您的網站或應用程序上使用。
對于本圖表教程，我將包括相應的CDN鏈接。如果愿意，可以在本地下載腳本。
AnyChart JavaScript庫具有模塊化系統，有助于優化網頁上運行的JS代碼的大小。要使用它制作堆積面積圖，請添加兩個模塊：“Core”和“Basic Cartesian”。第一個是使用任何其他模塊所需的基本AnyChart模塊。第二個模塊為所有Cartesian圖表提供動力。
這是到目前為止的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：添加數據以可視化
加載數據
COVID-19大流行是全球頭號新聞。在本教程中，我決定重點關注意大利，這是中國以外的第一個受到此次危機嚴重影響的地區。我將可視化數據與活躍病例、康復和死亡人數之間的關系，以了解從意大利疫情爆發到現在的情況。
我從Johns Hopkins CSSE 數據集中獲取了數據，該數據被認為是COVID-19官方統計的可靠來源。為了簡單起見，我將意大利語數據放在一個CSV文件中，您可以在此處找到。有效病例是通過從確診病例中減去死亡和康復來計算的。
可以在數據適配器模塊的幫助下將CSV文件加載到 AnyChart中，除了已經在其中引用的庫腳本之外，您還應該在<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>
現在，您可以使用數據適配器提供的loadCsvFile方法來加載CSV數據。
anychart.data.loadCsvFile ("http://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {
});
然后，將數據設置為可以在將來的基于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});
});
映射數據
該圖表將顯示來自三個字段的數據：活動案例，恢復和死亡。因此，您將需要三個不同的數據系列，每個字段一個。但是，您將如何“告知”圖表每個字段要使用哪些數據？
這是數據映射起作用的地方！通過調用mapAs方法觀察如何在代碼中實現這一點：
// 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：為圖表編寫JS代碼
現在一切似乎都準備就緒，您就可以開始編寫JS堆疊面積圖可視化代碼了。
首先，添加anychart.onDocumentReady函數，該函數將封裝圖表的全部代碼，并在頁面準備好后執行。
<script>
anychart.onDocumentReady(function () {
// The stacked area chart's code will be written here.
});
</script>
接下來，添加步驟3中的數據：
<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>
然后，指定圖表類型，設置序列并強制圖表按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');
為了清楚起見，讓我們為其命名并命名其坐標軸：
// 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");
還有一件事：我還想添加一條垂直線，該垂直線將隨鼠標移動，這將使人們更容易一目了然。在AnyChart中，只需使用十字線功能。以下代碼顯示了如何啟用十字準線以及一些其他樣式：
// 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();
享受結果：
通過輸出可以了解活動案例、恢復和死亡的數量如何隨時間變化。總數為所有確診病例。您可以將鼠標移到圖表上并查看每個點的確切值。注意十字準線如何幫助您了解每天的信息！
為了您的方便，完整代碼如下。隨時在AnyChart Playground上玩這個基本的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>
本教程內容尚未完結，敬請期待后續更新內容！
想要購買AnyChart正版授權，或了解更多產品信息請點擊
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
11次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線