绘图 | G2色块图

本文主要是介绍绘图 | G2色块图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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

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

首次接触一门新技术，最好是看官网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>

实现效果：