EXTJS Line chart 原理研究

 

 

 

    这个line chart 是EXT4.x系列提供的控件，具有一定的代表性，大部分控件库的line应该是大同小异，对line都有一个疑问，就是line 其实就是很多N个x，y坐标点组成的一个图形，正常做法若用M，L 结果就成直线连接，不过大部分chart 也提供这种形态chart ，但是要是形成一个平滑过渡的曲线可能有一定的难度，幸好web没有秘密，所有的东西最后都有用这种查看源代码看到他们实现的大致原理，最后

    关键的一段代码就是着一些

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="790" height="523" id="ext-gen1043" style="width: 790px; height: 523px;">
	<path 
	xmlns="http://www.w3.org/2000/svg" 
	id="ext-sprite-1220" 
	zIndex="3000" 
	d="M113,172.76
	   C113,172.76,172.42666666666665,155.93,202.14,155.93
	   C231.85666666666665,155.93,261.5733333333333,419.71,291.29,419.71
	   C321.00333333333333,419.71,363.2908891485868,320.5120633033277,380.43,296.24
	   C397.5691108514132,271.9679366966723,449.8369567321027,189.3646163857283,469.57,167.15
	   C489.30304326789735,144.9353836142717,535.3110874131442,106.88319381021387,558.71,88.57
	   C582.1115375490039,70.25475175924873,618.1433333333333,26.840000000000003,647.86,26.840000000000003
	   C677.5733333333334,26.840000000000003,737,414.1,737,414.1" 
	stroke="rgb(32,68,186)" 
	stroke-width="2px" 
	fill="none" 
	opacity="1" 
	transform="matrix(1,0,0,1,0,0)" 
	hidden="false" 
	style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"
	/>

</svg>
 

 

 这段line chart 就是用（113,172.76）（202.14,155.93）（291.29,419.71）（380.43,296.24）（469.57,167.15）（558.71,88.57）（647.86,26.84）（737,414.1）这些坐标点绘制一个曲线图，

 这段代码大致一看是没有规律，而且发现跟图形上的曲线不能完全对应，仔细看两遍就会发现如下两个规律

   1：每个贝塞尔曲线的结束点可以和 形成曲线的x,y坐标对应，开始点的x坐标却无法对应

   2：每个的开始点坐标是如果得来的，是根据下个点跟上个 x坐标的差值乘以一个系数得来，为什么要采用这种方法主要是为了避免两个连接点出现直角拐弯，我试着把每个贝塞尔曲线的开始坐标修改成上边的坐标点曲线变得非常生硬。