看到很多论文中都引用了一个图，
可能会在论文中也会引用到，于是想着先绘制一番，在同学帮助下，我了解到此图名叫：色块图，使用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>
实现效果：
还存在一些细节没有处理：比如横纵坐标的颜色这些，由于不是核心，故没有花时间去精致一番；其次，如果数据存在重复，则只能显示第一个，第二个在坐标轴上会显示空白，我暂时还没有想到什么解决方案【效果图中显示的for和for2，这里的for2原本应该是for，由于显示不出来，暂时修改为for2】
参考：
1）官网案例：https://antv-g2.gitee.io/zh/examples/heatmap/basic#basic
2）语雀：https://www.yuque.com/antv/g2-docs
3）G2官网API:https://antv-g2.gitee.io/zh/docs/api/chart
4）js生成随机数：https://blog.csdn.net/qq_41609957/article/details/94300473
5）G2常用配置项：https://blog.csdn.net/z_robot/article/details/107035739
539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
