PBI中使用SVG自定义折线缩略图

1. 目的驱动

在学习别人做的报表的时候，我有看到如下图所示的效果。

我个人觉得这个趋势图比较有意思，于是就研究了一下是如何画出来的。
经研究发现，这个就是用SVG画出来的。
前面介绍SVG的时候提到过，SVG可以用来画一些自定义的图表。
这里我们主要就学习如何用SVG画折线图。
图中所示的折线图的含义是：每类电影票房趋势的变化(by year)。
即：X轴——year，Y轴——每年该类电影票房总值。

2. 理解设计原理

由于是缩略图，我们肯定不能按照真实的year和票房来展现X、Y轴。
而需要对X、Y轴进行一些处理，让缩略图显示得更加美观。

对X、Y轴的处理主要就是：计算相对位置(当前值在整个区间内的比例)。
X轴：以最小年份作为X轴的起点，最大年份作为X轴的终点，然后计算当前年份在整个区间内的百分比位置。Y轴同理。

比如X轴：假设某电影的上映年限为2000年-2020年，如果当前年份为2010年，那么2010年就应该在整个X轴的50%的位置。
Y轴同理：假设某电影的票房区间(最大值-最小值)(by year)为一亿，而当前年份的票房高出最低票房三千万，则该年的Y坐标就应该在整个Y轴的30%的位置。

注：必须理解 “相对位置” 的概念，才能知道图是何如画出来的。

1. SVG折线图基本属性

折线图的简单示例：

<svg xmlns='http://www.w3.org/2000/svg'
	 viewBox='0 0 500 500'>
<polyline
		  fill='none'
		  stroke='red'
		  stroke-width='4'
		  points='0,40 40,40 40,80 80,80 80,120 120,120 120,160'/>
</svg>

1. 标签

画简单的折线图，我们只需要用到两个标签。

1. <svg…>…</svg> 标签：最基本的标签，画任何类型的图都需要在外面嵌套<svg…>…</svg>标签；
2. <polyline…/> 标签：专门画折线图的标签。

2.标签的属性

1. 每个标签会有一些基本的属性(在PBI中使用SVG时，属性值必须用单引号引起来)。
2. 每个属性之间用空格进行分隔(可以换行)。

标签属性说明：

• xmlns：说明这段代码所遵从的标准；
• viewBox：设置可视窗口的大小；
• fill：设置图形填充颜色；
• stroke：设置图形边框的颜色；
• stroke-width：设置图形边框的宽度；
• points：画折线图的点位信息，每个点位用空格隔开，SVG会按顺序将各个点连接起来；
  如：points=‘0,40 40,40 40,80 80,80 80,120 120,120 120,160’
  代表依次从点1(0,40)到点2(40,40)到点3(40,80)…，直到最后一个点，绘制折线图。

3. 显示折线图

可以在 SVG图形展示 中查看SVG的图形形状 (将代码粘贴到文本框中，然后运行即可)。
前面的SVG代码就可以绘制出下面的折线图：