看到BI佐罗老师分享借助绘图区背景实现了渐变折线图,本文在此基础上扩充两个用法。
1. 填充图案折线图
核心步骤和佐罗老师文章中的渐变效果一致,唯一区别在于绘图区插入图案式背景。
分享一个自定义这种类型纹理的工具。首先,将以下SVG代码存入空白SVG格式的文件:
<svg width="640" height="360" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="620" height="340" fill="brown"/>
</svg>
这是一个普通的长方形。接着打开:
https://junminwu.github.io
选择底纹填充工具:
导入准备好的SVG文件,选择图案形状、颜色、密度,调整完成后下载SVG:
把SVG放入堆积面积图的绘图区背景:
2. 异形百分比图表
左图从下到上展示,右图相反:
看上去一点折线图的影子也没有,原理依然是折线图绘图区背景。
首先,需要有一个百分比度量值,和填充度量值,二者相加等于1
M.填充 =1-[M.Pct]
把两个度量值放入堆积面积图Y轴:
得到:
因为两个度量值大小不随日期变化,效果是两个矩形。将直线的宽度设为0进行隐藏:
XY轴标签均隐藏,Y轴最大值设为1:
绘图区背景插入图片:
效果:
图片的最优选择是SVG格式,体积小且放大无损。次优是无背景PNG格式,https://pngimg.com/ 资源很多(请注意使用说明版权)。实际值的阴影区域关闭:
填充值的阴影区域打开,颜色和页面背景色保持相同,并带有一定透明度:
标题fx定义,即完工。
以上是从下到上的结构,即最下方为0,如需从上到下,实际值和填充值相反方向存放:
小多图在小型序列图区域拖入对应维度: