堆叠的面积图是经典面积图的一种变体，是一种非常流行的数据可视化形式。它们非常适合以图形方式表示多个变量及其总数如何随时间变化。在本教程中，我将向您展示如何轻松地创建交互式JavaScript堆叠面积图，该图在任何HTML5项目、网站或应用中都具有吸引力。
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="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="https://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="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-cartesian.min.js"></script> <script src="https://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 ("https://static.anychart.com/git-storage/word-press/data/covid-19-italy/data.csv", function (data) {});
然后，将数据设置为可以在将来的基于JavaScript的堆积面积图中使用：
anychart.data.loadCsvFile ("https://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});});
映射数据
该图表将显示来自三个字段的数据：活动案例，恢复和死亡。因此，您将需要三个不同的数据系列，每个字段一个。但是，您将如何“告知”图表每个字段要使用哪些数据/span>
这是数据映射起作用的地方！通过调用mapAs方法观察如何在代码中实现这一点：
// map data for the deaths seriesvar deathsData = dataSet.mapAs({ 'x': 0, 'value': 2 });// map data for the recovered seriesvar recoveredData = dataSet.mapAs({ 'x': 0, 'value': 3 });// map data for the active seriesvar 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 ("https://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 typevar chart = anychart.area();// create a series with the mapped active datavar actSeries = chart.splineArea(activeData);// create a series with the mapped recovered datavar recSeries = chart.splineArea(recoveredData);// create a series with the mapped deaths datavar deathsSeries = chart.splineArea(deathsData);// force the chart to stack values by the y scalechart.yScale().stackMode('value');
为了清楚起见，让我们为其命名并命名其坐标轴：
// set the chart titlechart.title('Covid-19 in Italy');// set the labels of the axeschart.xAxis().title("Date");chart.yAxis().title("Number of people");
还有一件事：我还想添加一条垂直线，该垂直线将随鼠标移动，这将使人们更容易一目了然。在AnyChart中，只需使用十字线功能。以下代码显示了如何启用十字准线以及一些其他样式：
// turn on the crosshairvar crosshair = chart.crosshair();crosshair.enabled(true) .yStroke(null) .xStroke('#fff') .zIndex(39);crosshair.yLabel().enabled(false);
最后，将图表放入容器中并使用绘图命令来绘制图表。
// set the container id for the chartchart.container('container');// initiate chart drawingchart.draw();
享受结果：
通过输出可以了解活动案例、恢复和死亡的数量如何随时间变化。总数为所有确诊病例。您可以将鼠标移到图表上并查看每个点的确切值。注意十字准线如何帮助您了解每天的信息！
为了您的方便，完整代码如下。随时在AnyChart Playground上玩这个基本的JS堆积面积图。
<!DOCTYPE html><html><head> <title>Stacked Area Chart</title> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.8.0/js/anychart-data-adapter.min.js"></script> <script src="https://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("https://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正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！