请看上图，需求背景如下：
现在有多(5)个主题，也就是多个大竖条，我只画了2个。每个主题中又有维度，每个维度的数据是不同的。
图片中的颜色大小就是模拟数据的大小来显示的。如果某个维度的数据大，那么该格子的高度就高点。也就是说：数据abcde显示的方块高度是根据数据来的。
但是，现在各个主题之间的数据是有流入流出的效果。
也就是说可能第一主题的数据a指向了第二主题的数据c和数据d
现在的问题的是，页面上所有块的展示和箭头的指向都是由数据来决定的。
我的问题如下：
像这种页面该怎么布局，或者有没有其他的解决方案？
页面上怎么画箭头，箭头该怎么动态的指向？
有没有其他第三方类库能解决类似的需求？
请知道的朋友能给一些解决方案，谢谢！
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
It is absolutely no problem to lay out simple color blocks with css. Whether it is 5 or N, the height and color can be dynamically set with js.
Draw an arrow? It’s not impossible to draw with css, but you need to spend time on calculating the line position, length, and angle, combined with
transform.Combining the first two, let’s look for a chart library to solve it. If there are no arrows, some funnel charts should be changed to the form of vertical color blocks. Add the arrow and it will be hard to find. . .
I recommend
canvasjust make it yourself, and you’ll learn how to draw a rectangle. It is also easy to draw a diagonal line by finding the midpoint of the two blocks of color that you want to draw a connecting line.Manual drawing should be possible, but if used in actual projects, it is recommended to use the stack chart implementation in a JS drawing library, such as Baidu's ECharts or Alibaba's G2.