chart.js通过filter来进行显示隐藏data数据

目的：当data里面的数据大于5的时候，才会显示该柱形
中间遇到的问题：
1.filter过滤器会执行两遍函数，然后我的for循环执行了两遍，第一遍是正常的，第二遍他又在其中筛选了一遍，导致图表的label为undfind。
2.还有当中出现了empty，是由于我的j++写错地方写在了if的外面，导致我的循环跑了8遍，比如在a[0]的时候我右侧没有值给他就会出现empty。
例子：

解决办法：
在给data数据进行重新赋值的时候不要用你定义的arr,用精确标，一层一层写下去然后赋值，这样就不会再进入for循环。虽然filter还是会执行两次，至于是为什么，我也不太清楚，如果有知道的，欢迎留言。

html

<div class="report">
	<canvas id="myChart"></canvas>
</div>

js

var app = new Vue({
				el: '#app',
				data: {
					cur: undefined,
					endTime: {},
					report: {},
					ri: {},
				},
				created() {
					let id = this.getUrlParam("id");
					let ac = this.getUrlParam("ac");
					axios.get(`/svc/assessment/scale/report/${id}?ac=${ac}`)
						.then((res) => {
							this.report = res.data.payload;
							this.ri = res.data.payload.indicators;
							this.endTime = res.data.payload.timeTaken;
							this.draw();
							// console.log(this.ri);
							axios.get(`/svc/assessment/scale/${res.data.payload.scale.id}`)
								.then((res2) => {
									res.data.payload.scale = res2.data.payload;
									let t0 = JSON.stringify(res2.data.payload.topics[0]); //利用JSON进行模板的深拷贝
									for (let i in res2.data.payload.topics) { //将第一题的属性套用到后续题目中
										res.data.payload.scale.topics[i] = Object.assign({
												min: 1, //min==null时默认值
												max: 1 //max==null时默认值
											},
											(res2.data.payload.topics[0].template && i > 0) ? JSON.parse(t0) : undefined, //第一题是模板且当前copy的不是第一题，则将第一题属性继承
											res2.data.payload.topics[i] //自身属性优先级最高
										);
									}
								});

						});
					document.addEventListener("UniAppJSBridgeReady", function() {});
				},

				methods: {
					getUrlParam(name) {
						let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
						let r = window.location.search.substr(1).match(reg); //匹配目标参数
						if (r != null) return decodeURI(r[2]);
						return null; //返回参数值
					},
					draw() {
						var ctx = document.getElementById("myChart").getContext("2d");
						var chart = new Chart(ctx, {
							type: 'bar',
							data: {
								labels: ['投射','被动攻击','潜意显现','抱怨','幻想','分裂','退缩','躯体化'],
								datasets: [{
									fillColor: 'rgba(190, 230, 253, 0.2)', // 填充色      
									borderColor: '#16A085',
									borderWidth: 1,
									data: [this.ri.M1, this.ri.M2,this.ri.M3, this.ri.M4,this.ri.M5,this.ri.M6,this.ri.M7,this.ri.M8],
								}]
							},
							options: {
								legend: {
									display: false,
									 labels: {
										filter: function(item, chart) {
											console.log('您哈呀');
											var arr = chart.datasets[0].data;
											var arrNew = [];
											var arrNew1 = [];
											var j = -1;
												for(var i = 0; i < arr.length;i++){
													if(arr[i] > 5){
														j++;
														arrNew[j] = arr[i];
														arrNew1[j] = chart.labels[i];
													}
												}
											chart.datasets[0].data = arrNew;
											chart.labels = arrNew1;
										},
									}
								},
								scales: {
									yAxes: [{
										ticks: {
											min: 0,
											stepSize: 1,
											max: 9,
											callback: function(value, index, values) {
												if (value == 19 || value == 45) {
													value = '正常';
												} else if (value == 15 || value == 30) {
													value = '';
												} else if (value == 84) {
													value = '阳性';
												}

												return value;
											}
										},
									}]
								}

							}
						});
					}
				},

			});