?构建交互式 JS 马赛克图的分步指南。通过可视化 2020 年按品牌划分的季度 PC 出货量数据来说明。
AnyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。
AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。
AnyChart最新版
跟随这个面向前端 Web 开发人员和数据可视化爱好者的快速教程，掌握使用 JavaScript创建马赛克图表的窍门。
通过 4 个简单步骤构建 JS 马赛克图马赛克图表可能看起来令人兴奋，但很难创建。但是，使用JavaScript 图表库创建此图表非常简单和容易，因为可以消除很多编码负担，并允许您以最少的技术细节快速制作图表。
在本教程中，我使用AnyChart JS 库。我选择 AnyChart 是因为它灵活且易于开始。由于大量的文档以及许多有用的示例，它特别适合初学者。
在可视化数据时，具有一些 HTML 和 JavaScript 等技术背景是一个优势。尽管如此，使用 JS 库创建交互式图表并不复杂，并且使用几乎所有支持这种图表类型的 JavaScript 库创建马赛克图表的步骤往往或多或少相同。
创建 JS 马赛克图的 4 个基本步骤是：
- 为图表创建一个 HTML 页面。
- 添加必要的 JavaScript 文件。
- 连接数据。
- 编写绘制图表所需的JS代码。
1. 创建一个基本的 HTML 页面
首先要做的是创建一个基本的 HTML 页面来保存图表。接下来，创建一个 HTML 块元素，为了<div>稍后在代码中标识它，我给它一个 id 属性，如“container”。
<!DOCTYPE html><html> <head> <title>JavaScript Mosaic 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>
我为块提供 100% 的宽度和高度，以便图表填充整个页面，但可以根据您的喜好指定。
2. 引用必要的 JavaScript 文件
下一步是添加图表库脚本以创建马赛克图表。我包含了 AnyChart 的CDN 中的相应文件，因为这是我正在使用的库。当然，这些脚本也可以这样下载和引用。
对于此图表，我需要核心脚本以及马赛克图表的特定模块。在这里，马赛克图表模块包含 3 种不同类型的 Marimekko 图表，马赛克就是其中之一。如果您想了解有关这些图表及其具体特征的更多信息，请查看有关 Marimekko 图表的 AnyChart文档。
我将这两个脚本添加到<head>我的 HTML 页面的部分。
<!DOCTYPE html><html> <head> <title>JavaScript Mosaic Chart</title> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"> </script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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 mosaic chart will come here. </script> </body></html>
3.设置数据
我整理了Gartner给出的 2020 年每个季度不同 PC 品牌的销售数据。为了方便马赛克图的创建，我把数据处理成适合它的格式，由于数据有限，我直接在代码中添加了。
在这里，我在 X 轴上绘制季度，将品牌绘制为单独的图块，因此我在标题数据中添加了品牌，并在行中添加了季度数字。
<!DOCTYPE html><html> <head> <title>JavaScript Mosaic Chart</title> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"> </script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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> var data = { header: [ '#', 'LENOVO', 'HP', 'DELL', 'APPLE', 'ACER', 'ASUS', 'OTHERS' ], rows: [ ['Q1', 12613,11114,10158,3555,2900,2603,8693], ['Q2', 16197,16165,10648,4368,4007,3593,9829], ['Q3', 18310,15447,10827,5513,5085,4747,11448], ['Q4', 21491,15683,13199,6893,4741,4570,12813] ] }; </script> </body></html>
现在我们已经完成了所有的准备工作，让我们继续绘制别致的交互式 JS 马赛克图表的最后一步！
4. 为图表编写 JavaScript 代码
对于没有太多编码经验的人来说，编写代码可能听起来令人生畏，但相信我，实际上需要编写 5 行代码才能想象出一个漂亮的马赛克图表。
首先，我添加了一个包含所有代码的函数，以确保其中的整个代码仅在页面准备好后才会执行。然后我将数据放入这个函数中。
接下来，我使用内置函数创建马赛克图表并设置数据。
最后，我添加对要绘制图表的容器的引用，设置图表的标题，并开始绘制。
<!DOCTYPE html><html> <head> <title>JavaScript Mosaic Chart</title> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"> </script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.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 () { var data = { header: [ '#', 'LENOVO', 'HP', 'DELL', 'APPLE', 'ACER', 'ASUS', 'OTHERS' ], rows: [ ['Q1', 12613,11114,10158,3555,2900,2603,8693], ['Q2', 16197,16165,10648,4368,4007,3593,9829], ['Q3', 18310,15447,10827,5513,5085,4747,11448], ['Q4', 21491,15683,13199,6893,4741,4570,12813] ] }; // create a mosaic chart var chart = anychart.mosaic(); // set chart data chart.data(data); // set container id for the chart chart.container('container'); // set the chart title chart.title("Quarterly Brand-wise Personal Computer Shipments in 2020 (Thousands of Units)"); // initiate chart drawing chart.draw(); }); </script> </body></html>
您可以通过每个季度的宽度增加立即看到每个季度的出货量如何增加。在品牌方面，联想是明显的市场领导者，其销售额逐季增长。此外，可以清楚地看到，联想、惠普和戴尔占据了超过 50% 的市场份额。
在CodePen [或AnyChart Playground ]上查看带有完整 JS/CSS/HTML 代码的马赛克图表的初始版本。
自定义马赛克图表
大多数不错的 JS 图表库都允许您使用它们的 API 自定义图表。这些自定义可以使您的数据可视化以个性化的美感和改进的您想要传达的消息的表示方式脱颖而出。
现在已经创建了基本的马赛克图表，让我向您展示如何通过一些简单的自定义来增强图表在表示数据和调整其外观方面的能力。
1.减少单个瓷砖之间的空间
为了改善马赛克的外观，我只用一行代码减少了每个点之间的空间。
chart.pointsPadding(3);
2. 改进数据标签展示
数据中的值是以千为单位的数字形式。为了使其更具可读性和易于理解，我更改了数字的格式以显示以百万为单位的数字。我还更新了图表的标题以反映这一修改。
// set the chart labels settingschart.labels() .format(function(e){ var value = ((this.value)/1000).toFixed(2); return value + " M"; });...// set the chart titlechart.title("Quarterly Brand-wise Personal Computer Shipments in 2020");
3.更改颜色主题并进行其他相关修改
为了使马赛克图表更加个性化，我决定使用不同的调色板。AnyChart 提供了一些很棒的内置主题，其中包括预定义的设置，例如图表数据点的颜色以及背景以及不同的字体。您也可以创建自定义主题，但对于此图表，我选择了一个开箱即用的主题，感觉就像是老一代的 PC 屏幕。
我在该<head>部分添加主题脚本，然后添加一行代码来设置马赛克图表的主题。
根据我的喜好，固有字体大小略小，因此我在样式中指定了字体大小。另外，我希望图表的标题更大，所以我也添加了一些代码来修改它。
<head> <script src="https://cdn.anychart.com/releases/8.9.0/themes/dark_blue.min.js"> </script> ... <style type="text/css"> #container text { font-size: 13px; } </style></head>...<body> <script> // set the chart theme anychart.theme('darkBlue'); </script></body>
另外，我希望图表的标题更大，所以我也添加了一些代码来修改它。
// set the chart titlechart .title() .enabled(true) .useHtml(true) .text("<span style='font-size:16px';>Quarterly Brand-wise Personal Computer Shipments in 2020</span>");
马赛克图看起来是不是非常个性化和引人入胜/span>
4. 增强工具提示
最后要做的是使工具提示信息更丰富且格式更佳。由于这是一个具有非常清晰可识别的单个数据点的马赛克图表，我希望工具提示显示该特定季度的所有数据值。这可以通过指定工具提示的显示模式来完成。
最后，我只是调整了工具提示的外观。
// set union tooltipchart.tooltip().displayMode('union');// enable HTML in tooltips and formatchart .tooltip() .useHtml(true) .format("<h5 style='font-size:14px; margin: 0.5rem 0;'>{%name}</h5>{%SeriesName}: {%value}{scale:(1000)(1000)|( M)}");
在此处或CodePen [或AnyChart Playground ]上查看马赛克图表的最终代码。
<!DOCTYPE html><html> <head> <title>JavaScript Mosaic Chart</title> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-core.min.js"> </script> <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-mekko.min.js"> </script> <script src="https://cdn.anychart.com/releases/8.9.0/themes/dark_blue.min.js"> </script> <style type="text/css"> html, body, #container { width: 100%; height: 100%; margin: 0; padding: 0; } #container text { font-size: 13px; } </style> </head> <body> <div id="container"></div> <script> anychart.onDocumentReady(function () { var data = { header: [ '#', 'LENOVO', 'HP', 'DELL', 'APPLE', 'ACER', 'ASUS', 'OTHERS' ], rows: [ ['Q1', 12613,11114,10158,3555,2900,2603,8693], ['Q2', 16197,16165,10648,4368,4007,3593,9829], ['Q3', 18310,15447,10827,5513,5085,4747,11448], ['Q4', 21491,15683,13199,6893,4741,4570,12813] ] }; // set the chart theme anychart.theme('darkBlue'); // create a mosaic chart var chart = anychart.mosaic(); // set points padding chart.pointsPadding(3); // set chart data chart.data(data); // set the chart labels settings chart.labels() .format(function(e){ var value = ((this.value)/1000).toFixed(2); return value + " M"; }); // set union tooltip chart.tooltip().displayMode('union'); // enable HTML in tooltips and format chart .tooltip() .useHtml(true) .format("<h5 style='font-size:14px; margin: 0.5rem 0;'>{%name}</h5>{%SeriesName}: {%value}{scale:(1000)(1000)|( M)}"); // set container id for the chart chart.container('container'); // set the chart title chart .title() .enabled(true) .useHtml(true) .text("<span style='font-size:16px';>Quarterly Brand-wise Personal Computer Shipments in 2020</span>"); // initiate chart drawing chart.draw(); }); </script> </body></html>
结论
如您所见，在图表库的帮助下，构建一个具有创造性和交互性的 JS Mosaic Chart 并不困难。当然，这只是触及皮毛，所以继续尝试不同的图表和数据集。还有许多其他 JS 图表库可供探索，或者如果您愿意，可以查看AnyChart 中一些很棒的其他图表类型。
相关产品推荐：
AnyGantt——构建复杂且内容丰富的甘特图的理想工具
AnyStock——基于XML/JSON的Flash金融图表解决方案
AnyMap——可交互式地图
想要购买AnyChart正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！