概要

绘制折线图，难点在于共有六个纵坐标，且各个纵坐标之间的间距无规则，我们需要在该坐标系中绘制折现图Dm、Im、Sm、Cm（2，7，5，7）,该如何绘制？

例如：

成果展示：

整体架构流程

vuejs、canvas、uni、p-canvas插件、hbuiderx编辑器

使用hbuiderx编辑器，在新建项目中引入了p-canvas插件，使用uni框架。

技术细节

1.在墨刀中绘制背景图，再在上面画出每个点，根据右边的X、Y即可确定该点的横纵坐标；

        

2.所有的点坐标生成数组，即为:

{
	"dm": [{
		"x": 102,
		"y": 843,
		"value": 0
	}, {
		"x": 102,
		"y": 756,
		"value": 1
	}, {
		"x": 102,
		"y": 652,
		"value": 2
	}, {
		"x": 102,
		"y": 569,
		"value": 3
	}, {
		"x": 102,
		"y": 517,
		"value": 4
	}, {
		"x": 102,
		"y": 428,
		"value": 5
	}, {
		"x": 102,
		"y": 374,
		"value": 6
	}, {
		"x": 102,
		"y": 334,
		"value": 7
	}, {
		"x": 102,
		"y": 313,
		"value": 8
	}, {
		"x": 102,
		"y": 290,
		"value": 9
	}, {
		"x": 102,
		"y": 243,
		"value": 10
	}, {
		"x": 102,
		"y": 191,
		"value": 11
	}, {
		"x": 102,
		"y": 154,
		"value": 12
	}, {
		"x": 102,
		"y": 137,
		"value": 13
	}, {
		"x": 102,
		"y": 121,
		"value": 14
	}, {
		"x": 102,
		"y": 107,
		"value": 15
	}],
	"im": [{
		"x": 215,
		"y": 843,
		"value": 0
	}, {
		"x": 215,
		"y": 759,
		"value": 1
	}, {
		"x": 215,
		"y": 608,
		"value": 2
	}, {
		"x": 215,
		"y": 517,
		"value": 3
	}, {
		"x": 215,
		"y": 430,
		"value": 4
	}, {
		"x": 215,
		"y": 372,
		"value": 5
	}, {
		"x": 215,
		"y": 335,
		"value": 6
	}, {
		"x": 215,
		"y": 288,
		"value": 7
	}, {
		"x": 215,
		"y": 266,
		"value": 8
	}, {
		"x": 215,
		"y": 243,
		"value": 9
	}, {
		"x": 215,
		"y": 188,
		"value": 10
	}, {
		"x": 215,
		"y": 152,
		"value": 11
	}, {
		"x": 215,
		"y": 136,
		"value": 12
	}, {
		"x": 215,
		"y": 121,
		"value": 13
	}, {
		"x": 215,
		"y": 106,
		"value": 14
	}],
	"sm": [{
		"x": 333,
		"y": 857,
		"value": 0
	}, {
		"x": 333,
		"y": 777,
		"value": 1
	}, {
		"x": 333,
		"y": 745,
		"value": 2
	}, {
		"x": 333,
		"y": 663,
		"value": 3
	}, {
		"x": 333,
		"y": 584,
		"value": 4
	}, {
		"x": 333,
		"y": 535,
		"value": 5
	}, {
		"x": 333,
		"y": 451,
		"value": 6
	}, {
		"x": 333,
		"y": 396,
		"value": 7
	}, {
		"x": 333,
		"y": 355,
		"value": 8
	}, {
		"x": 333,
		"y": 321,
		"value": 9
	}, {
		"x": 333,
		"y": 266,
		"value": 10
	}, {
		"x": 333,
		"y": 182,
		"value": 11
	}, {
		"x": 333,
		"y": 141,
		"value": 12
	}, {
		"x": 333,
		"y": 118,
		"value": 13
	}, {
		"x": 333,
		"y": 98,
		"value": 14
	}],
	"cm": [{
		"x": 448,
		"y": 844,
		"value": 0
	}, {
		"x": 448,
		"y": 756,
		"value": 1
	}, {
		"x": 448,
		"y": 652,
		"value": 2
	}, {
		"x": 448,
		"y": 569,
		"value": 3
	}, {
		"x": 448,
		"y": 519,
		"value": 4
	}, {
		"x": 448,
		"y": 428,
		"value": 5
	}, {
		"x": 448,
		"y": 374,
		"value": 6
	}, {
		"x": 448,
		"y": 334,
		"value": 7
	}, {
		"x": 448,
		"y": 313,
		"value": 8
	}, {
		"x": 448,
		"y": 290,
		"value": 9
	}, {
		"x": 448,
		"y": 243,
		"value": 10
	}, {
		"x": 448,
		"y": 191,
		"value": 11
	}, {
		"x": 448,
		"y": 154,
		"value": 12
	}, {
		"x": 448,
		"y": 137,
		"value": 13
	}, {
		"x": 448,
		"y": 121,
		"value": 14
	}, {
		"x": 448,
		"y": 107,
		"value": 15
	}]	
}

 3.根据给定的坐表值来计算四个点的位置，连线的坐标就是该点的起止位置，此处使用了uni插件市场的p-canvas来绘制，注意该插件绘制图片在小程序上无法显现，可以按照如下布局。

<view class="content1">
			<image src="../../static/result.png" mode="widthFix"    style="width:590rpx;position: absolute;"></image>
			<PCanvas width="590" height="890" ref="canvasId_peter"             canvasId="canvasId_peter" unit='rpx'
				:options="options">
			</PCanvas>
</view>

小结

仅作总结学习，若需要源码，可联系我获取。