绘图 | G2色块图

今天药忘吃喽~ 2022-12-13 04:53 184阅读 0赞

看到很多论文中都引用了一个图，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70][] 论文中经常看到这个图

可能会在论文中也会引用到，于是想着先绘制一番，在同学帮助下，我了解到此图名叫：色块图，使用G2可以绘制，G2色块图地址：[https://antv-g2.gitee.io/zh/examples/gallery\#category-%E8%89%B2%E5%9D%97%E5%9B%BE][https_antv-g2.gitee.io_zh_examples_gallery_category-_E8_89_B2_E5_9D_97_E5_9B_BE]，拷贝一份到本地，运行看下效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70 1][]

还是比较类似的，但是和我想要的效果图，还是有一些区别，比如：横轴和纵轴的位置、色块上是否有数字展示、是否存在图例，颜色、数据量等存在差别。

首次接触一门新技术，最好是看官网API，其次是看博客，最好是专业博客对官网API的解读，拥有这些资源后就开始对示例代码进行修改，我将修改处标记了出来，方便阅读，代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>色块图</title>
    		<style type="text/css">
    			body{
    				padding: 0;
    				margin: 0;
    			}
    			#container{
    				padding-top: 2s00px;
    				width: 500px;
    				margin: 30px auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="container" />
    		<script src="js/g2.min.js" type="text/javascript" charset="utf-8"></script>
    		<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
    		<script>
    			const data = [
    				[0, 0, parseInt(Math.random() * 255 + 0)],
    				[0, 1, parseInt(Math.random() * 255 + 0)],
    				[0, 2, parseInt(Math.random() * 255 + 0)],
    				[0, 3, parseInt(Math.random() * 255 + 0)],
    				[0, 4, parseInt(Math.random() * 255 + 0)],
    				[0, 5, parseInt(Math.random() * 255 + 0)],
    				[0, 6, parseInt(Math.random() * 255 + 0)],
    				[0, 7, parseInt(Math.random() * 255 + 0)],
    				[0, 8, parseInt(Math.random() * 255 + 0)],
    				[0, 9, parseInt(Math.random() * 255 + 0)],
    				[0, 10, parseInt(Math.random() * 255 + 0)],
    				[0, 11, parseInt(Math.random() * 255 + 0)],
    				[0, 12, parseInt(Math.random() * 255 + 0)],
    				[0, 13, parseInt(Math.random() * 255 + 0)],
    				[0, 14, parseInt(Math.random() * 255 + 0)],
    				[0, 15, parseInt(Math.random() * 255 + 0)],
    				[0, 16, parseInt(Math.random() * 255 + 0)],
    				[0, 17, parseInt(Math.random() * 255 + 0)],
    				[1, 0, parseInt(Math.random() * 255 + 0)],
    				[1, 1, parseInt(Math.random() * 255 + 0)],
    				[1, 2, parseInt(Math.random() * 255 + 0)],
    				[1, 3, parseInt(Math.random() * 255 + 0)],
    				[1, 4, parseInt(Math.random() * 255 + 0)],
    				[1, 5, parseInt(Math.random() * 255 + 0)],
    				[1, 6, parseInt(Math.random() * 255 + 0)],
    				[1, 7, parseInt(Math.random() * 255 + 0)],
    				[1, 8, parseInt(Math.random() * 255 + 0)],
    				[1, 9, parseInt(Math.random() * 255 + 0)],
    				[1, 10, parseInt(Math.random() * 255 + 0)],
    				[1, 11, parseInt(Math.random() * 255 + 0)],
    				[1, 12, parseInt(Math.random() * 255 + 0)],
    				[1, 13, parseInt(Math.random() * 255 + 0)],
    				[1, 14, parseInt(Math.random() * 255 + 0)],
    				[1, 15, parseInt(Math.random() * 255 + 0)],
    				[1, 16, parseInt(Math.random() * 255 + 0)],
    				[1, 17, parseInt(Math.random() * 255 + 0)],
    				[2, 0, parseInt(Math.random() * 255 + 0)],
    				[2, 1, parseInt(Math.random() * 255 + 0)],
    				[2, 2, parseInt(Math.random() * 255 + 0)],
    				[2, 3, parseInt(Math.random() * 255 + 0)],
    				[2, 4, parseInt(Math.random() * 255 + 0)],
    				[2, 5, parseInt(Math.random() * 255 + 0)],
    				[2, 6, parseInt(Math.random() * 255 + 0)],
    				[2, 7, parseInt(Math.random() * 255 + 0)],
    				[2, 8, parseInt(Math.random() * 255 + 0)],
    				[2, 9, parseInt(Math.random() * 255 + 0)],
    				[2, 10, parseInt(Math.random() * 255 + 0)],
    				[2, 11, parseInt(Math.random() * 255 + 0)],
    				[2, 12, parseInt(Math.random() * 255 + 0)],
    				[2, 13, parseInt(Math.random() * 255 + 0)],
    				[2, 14, parseInt(Math.random() * 255 + 0)],
    				[2, 15, parseInt(Math.random() * 255 + 0)],
    				[2, 16, parseInt(Math.random() * 255 + 0)],
    				[2, 17, parseInt(Math.random() * 255 + 0)],
    				[3, 0, parseInt(Math.random() * 255 + 0)],
    				[3, 1, parseInt(Math.random() * 255 + 0)],
    				[3, 2, parseInt(Math.random() * 255 + 0)],
    				[3, 3, parseInt(Math.random() * 255 + 0)],
    				[3, 4, parseInt(Math.random() * 255 + 0)],
    				[3, 5, parseInt(Math.random() * 255 + 0)],
    				[3, 6, parseInt(Math.random() * 255 + 0)],
    				[3, 7, parseInt(Math.random() * 255 + 0)],
    				[3, 8, parseInt(Math.random() * 255 + 0)],
    				[3, 9, parseInt(Math.random() * 255 + 0)],
    				[3, 10, parseInt(Math.random() * 255 + 0)],
    				[3, 11, parseInt(Math.random() * 255 + 0)],
    				[3, 12, parseInt(Math.random() * 255 + 0)],
    				[3, 13, parseInt(Math.random() * 255 + 0)],
    				[3, 14, parseInt(Math.random() * 255 + 0)],
    				[3, 15, parseInt(Math.random() * 255 + 0)],
    				[3, 16, parseInt(Math.random() * 255 + 0)],
    				[3, 17, parseInt(Math.random() * 255 + 0)],
    				[4, 0, parseInt(Math.random() * 255 + 0)],
    				[4, 1, parseInt(Math.random() * 255 + 0)],
    				[4, 2, parseInt(Math.random() * 255 + 0)],
    				[4, 3, parseInt(Math.random() * 255 + 0)],
    				[4, 4, parseInt(Math.random() * 255 + 0)],
    				[4, 5, parseInt(Math.random() * 255 + 0)],
    				[4, 6, parseInt(Math.random() * 255 + 0)],
    				[4, 7, parseInt(Math.random() * 255 + 0)],
    				[4, 8, parseInt(Math.random() * 255 + 0)],
    				[4, 9, parseInt(Math.random() * 255 + 0)],
    				[4, 10, parseInt(Math.random() * 255 + 0)],
    				[4, 11, parseInt(Math.random() * 255 + 0)],
    				[4, 12, parseInt(Math.random() * 255 + 0)],
    				[4, 13, parseInt(Math.random() * 255 + 0)],
    				[4, 14, parseInt(Math.random() * 255 + 0)],
    				[4, 15, parseInt(Math.random() * 255 + 0)],
    				[4, 16, parseInt(Math.random() * 255 + 0)],
    				[4, 17, parseInt(Math.random() * 255 + 0)],
    				[5, 0, parseInt(Math.random() * 255 + 0)],
    				[5, 1, parseInt(Math.random() * 255 + 0)],
    				[5, 2, parseInt(Math.random() * 255 + 0)],
    				[5, 3, parseInt(Math.random() * 255 + 0)],
    				[5, 4, parseInt(Math.random() * 255 + 0)],
    				[5, 5, parseInt(Math.random() * 255 + 0)],
    				[5, 6, parseInt(Math.random() * 255 + 0)],
    				[5, 7, parseInt(Math.random() * 255 + 0)],
    				[5, 8, parseInt(Math.random() * 255 + 0)],
    				[5, 9, parseInt(Math.random() * 255 + 0)],
    				[5, 10, parseInt(Math.random() * 255 + 0)],
    				[5, 11, parseInt(Math.random() * 255 + 0)],
    				[5, 12, parseInt(Math.random() * 255 + 0)],
    				[5, 13, parseInt(Math.random() * 255 + 0)],
    				[5, 14, parseInt(Math.random() * 255 + 0)],
    				[5, 15, parseInt(Math.random() * 255 + 0)],
    				[5, 16, parseInt(Math.random() * 255 + 0)],
    				[5, 17, parseInt(Math.random() * 255 + 0)],
    				[6, 0, parseInt(Math.random() * 255 + 0)],
    				[6, 1, parseInt(Math.random() * 255 + 0)],
    				[6, 2, parseInt(Math.random() * 255 + 0)],
    				[6, 3, parseInt(Math.random() * 255 + 0)],
    				[6, 4, parseInt(Math.random() * 255 + 0)],
    				[6, 5, parseInt(Math.random() * 255 + 0)],
    				[6, 6, parseInt(Math.random() * 255 + 0)],
    				[6, 7, parseInt(Math.random() * 255 + 0)],
    				[6, 8, parseInt(Math.random() * 255 + 0)],
    				[6, 9, parseInt(Math.random() * 255 + 0)],
    				[6, 10, parseInt(Math.random() * 255 + 0)],
    				[6, 11, parseInt(Math.random() * 255 + 0)],
    				[6, 12, parseInt(Math.random() * 255 + 0)],
    				[6, 13, parseInt(Math.random() * 255 + 0)],
    				[6, 14, parseInt(Math.random() * 255 + 0)],
    				[6, 15, parseInt(Math.random() * 255 + 0)],
    				[6, 16, parseInt(Math.random() * 255 + 0)],
    				[6, 17, parseInt(Math.random() * 255 + 0)],
    				[7, 0, parseInt(Math.random() * 255 + 0)],
    				[7, 1, parseInt(Math.random() * 255 + 0)],
    				[7, 2, parseInt(Math.random() * 255 + 0)],
    				[7, 3, parseInt(Math.random() * 255 + 0)],
    				[7, 4, parseInt(Math.random() * 255 + 0)],
    				[7, 5, parseInt(Math.random() * 255 + 0)],
    				[7, 6, parseInt(Math.random() * 255 + 0)],
    				[7, 7, parseInt(Math.random() * 255 + 0)],
    				[7, 8, parseInt(Math.random() * 255 + 0)],
    				[7, 9, parseInt(Math.random() * 255 + 0)],
    				[7, 10, parseInt(Math.random() * 255 + 0)],
    				[7, 11, parseInt(Math.random() * 255 + 0)],
    				[7, 12, parseInt(Math.random() * 255 + 0)],
    				[7, 13, parseInt(Math.random() * 255 + 0)],
    				[7, 14, parseInt(Math.random() * 255 + 0)],
    				[7, 15, parseInt(Math.random() * 255 + 0)],
    				[7, 16, parseInt(Math.random() * 255 + 0)],
    				[7, 17, parseInt(Math.random() * 255 + 0)]
    
    			];
    
    			const source = data.map((arr) => {
    				return {
    					name: arr[0],
    					day: arr[1],
    					data: arr[2],
    				};
    			});
    
    			const chart = new G2.Chart({
    				container: 'container',
    				// autoFit: true,
    				height: 500,
    				width:500,
    			});
    
    			chart.data(source);
    
    			chart.scale('name', {
    				type: 'cat',
    				values: ['<s>', 'russia', 'calls', 'for', 'joint', 'front', 'against', 'terroism'],
    				/* 长度为8 */
    			});
    			chart.scale('day', {
    				type: 'cat',
    				values: ['terroism', 'global', 'combating', 'for', 'front', 'joint', 'a', 'of', 'creation', 'the', 'for2',
    					'sunday', 'called', 'ivanov', 'minister', 'defense', 'russian', '<s>'
    				]
    				/* 长度为18 */
    			});
    			chart.scale('sales', {
    				nice: true,
    			});
    
    			chart.axis('name', {
    				tickLine: null,
    				position: "top",
    				/* 设置x坐标在上方 */
    				label: {
    					offset: 20,
    					/* x轴上文字与图表之间的间距 */
    					rotate: 150 /* 坐标文字旋转角度 */
    				},
    			});
    
    			chart.axis('day', {
    				position: "right",
    				/* 设置y坐标显示在右边 */
    				label: {
    					offset: 10,
    				},
    
    			});
    
    			chart.tooltip({
    				showMarkers: false,
    				title: "温馨提示：" /* 设置鼠标移到每一个色块上显示的提示信息的标题 */
    			});
    			chart.legend(false); /* 设置不显示图例 */
    			chart
    				.polygon()
    				.position('name*day')
    				.color('data', '#21487f-#69a0bf-#f4f9fd')
    				.label('aa', { /* 第一个字段aa和data不一致,则色块上不显示数据,如果一致，则色块上会显示出数据*/
    					offset: -2,
    					style: {
    						fill: '#fff',
    						shadowBlur: 2,
    						shadowColor: 'rgba(0, 0, 0, .45)',
    					},
    				})
    				.style({
    					lineWidth: 1,
    					stroke: '#fff',
    				});
    
    			chart.interaction('element-active');
    
    			chart.render();
    		</script>
    	</body>
    </html>

实现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70 2][]

还存在一些细节没有处理：比如横纵坐标的颜色这些，由于不是核心，故没有花时间去精致一番；其次，如果数据存在重复，则只能显示第一个，第二个在坐标轴上会显示空白，我暂时还没有想到什么解决方案【效果图中显示的for和for2，这里的for2原本应该是for，由于显示不出来，暂时修改为for2】

参考：

1）官网案例：[https://antv-g2.gitee.io/zh/examples/heatmap/basic\#basic][https_antv-g2.gitee.io_zh_examples_heatmap_basic_basic]

2）语雀：[https://www.yuque.com/antv/g2-docs][https_www.yuque.com_antv_g2-docs]

3）G2官网API:[https://antv-g2.gitee.io/zh/docs/api/chart][https_antv-g2.gitee.io_zh_docs_api_chart]

4）js生成随机数：[https://blog.csdn.net/qq\_41609957/article/details/94300473][https_blog.csdn.net_qq_41609957_article_details_94300473]

5）G2常用配置项：[https://blog.csdn.net/z\_robot/article/details/107035739][https_blog.csdn.net_z_robot_article_details_107035739]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70]: /images/20221123/c3d8bb432a55429fa1318af220b7b7d4.png
[https_antv-g2.gitee.io_zh_examples_gallery_category-_E8_89_B2_E5_9D_97_E5_9B_BE]: https://antv-g2.gitee.io/zh/examples/gallery#category-%E8%89%B2%E5%9D%97%E5%9B%BE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70 1]: /images/20221123/bec1af60da3c435c93fe551335ca8ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Nvbmd4aWFvbGluZ2Jhb2Jhbw_size_16_color_FFFFFF_t_70 2]: /images/20221123/852d3bb703974acf95693c26d5a5889b.png
[https_antv-g2.gitee.io_zh_examples_heatmap_basic_basic]: https://antv-g2.gitee.io/zh/examples/heatmap/basic#basic
[https_www.yuque.com_antv_g2-docs]: https://www.yuque.com/antv/g2-docs
[https_antv-g2.gitee.io_zh_docs_api_chart]: https://antv-g2.gitee.io/zh/docs/api/chart
[https_blog.csdn.net_qq_41609957_article_details_94300473]: https://blog.csdn.net/qq_41609957/article/details/94300473
[https_blog.csdn.net_z_robot_article_details_107035739]: https://blog.csdn.net/z_robot/article/details/107035739