zdying · July 24, 2016 14:04
diff --git a/阶段高点和低点.html b/阶段高点和低点.html
 <!DOCTYPE html>
 <html>
    <head>
        <meta charset="utf-8">
        <title>N</title>
        <style media="screen">
            #con{
                position: relative;
                height: 160px;
                background: #2C323C;
            }

            .vol{
                width: 6px;
                height: 6px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
                background: red;
            }
        </style>
    </head>
    <body>
        <script src="http://web.ifzq.gtimg.cn/appstock/app/fqkline/get?_var=kline_dayqfq&param=sz000590,day,,,320,qfq&r=0.3237445075722003"></script>
        <div class="" id="con">

        </div>
        <script type="text/javascript">
            'use strict';

            // var arr = kline_dayqfq.data.sz000590.qfqday;

            var arr1 = [20, 41, 29, 33, 24, 26, 43, 52, 40, 28, 23, 25, 37, 38, 42, 29, 17, 15, 26, 26, 32, 49, 51];
            var arr = [22,22.39,22.08,22.18,22.02,22.02,21.9,21.7,21.65,23,23.8,24.2,24.05,24.29,25.17,
                25.4,24.53,25.15,25.07,25.01,25.33,24.68,24.63,24.6,24.99,24.08,23.06,22.91,22.6,22.7,
                23.3,23.4,23.18,22.84,22.52,21.7,21.53,22.88,23.15,23.75,23.8,24.2,24.58,24.93,25,
                25.51,24.59,24.7,25.8,25.91,24.61,23.38,23.5,22.43,21.31,20.24,19.23,18.58,17.87,17.39,
                16.8,17.5,18.39,18.2,18.13,18.3,17.71,17.09,16.43,16.04,16.68,16.69,17.44,17.88,
                18.01,18.7,19.11,19.81,20.04,19.7,19.9,19.53,19.53,18.73,18.33,17.41,17.42,17.45,
                18.36,17.95,18.06,18.69,18.5,18.3,18,18.35,18.86,19.1,19.18,19.61,20.52,20.58,20.95,
                21.45,21.67,21.61,20.65,20.92,21.38,21,20.99,22.05,22.12,22,21.3,21.25,21.23,21.19,
                21.12,21.06,19.63,19,18.7,19.85,19.94,20.07,20.55,21.11,21.11,21.61,21.86,21.3,20.37,
                20.22,20.47,20.59,20.35,20.47,20.56,19.94,19.6,19.9,20.69,20.95,21.3,21.19,21.09,21.45,
                21.31,21.79,21.61,21.62,21.41,21.41,21.33,20.3,20.37,20.2,21.58,21.3,21.4,21.48,21.26,
                21.95,21.59,21.35,22.11,22.12,22,22.18,22.32,
                22.6,22.85,23.69,23.53,23.77,23.6,23.42,23.19,22.95,22.89,22.88,23.29,23.78,23.2].slice(-60);


            var max = Math.max.apply(Math, arr1);
            var min = Math.min.apply(Math, arr1);
            var p = 140 / (max - min);

            var html = arr1.map((ele, idx) => {
                // var ele = dayInfo[2];
                // var bottom = (ele - min) * p + 10;
                var bottom = ele;
                return `<div id="vol-${idx}" class="vol" style="left: ${idx * 20}px; bottom: ${bottom}px"></div>`
            });

            document.getElementById('con').innerHTML = html.join('');

            function getTrendPoint(arr, delta){
                let mod = 1;
                let lastMin = 0, lastMax = 0;
                let minArr = [];
                let maxArr = [];

                /*
                  value - min       max - min
                -------------   = -------------
                    height             140
                */

                arr.forEach((ele, index) => {
                    // debugger
                    if(index > 0){
                        if(mod === 1){
                            // 高点
                            // if((ele - arr[lastMax]) / arr[lastMax] > .1){
                            if(ele >= arr[lastMax]){
                                lastMax = index;
                            }else if((ele - arr[lastMax]) / arr[lastMax] < -delta){
                            // }else{
                                // 拐点
                                maxArr.push(lastMax);
                                lastMin = index;
                                mod = 0;
                            }
                        }else{
                            if(ele <= arr[lastMin]){
                            // if((ele - arr[lastMin]) / arr[lastMin] < -.1){
                                lastMin = index;
                            }else if((ele - arr[lastMin]) / arr[lastMin] > delta){
                            // }else{
                                minArr.push(lastMin);
                                lastMax = index;
                                mod = 1
                            }
                        }
                    }

                    if(index === arr.length - 1){
                        if(ele >= arr[lastMax]){
                            maxArr.push(index)
                        }else if(ele <= arr[lastMin]){
                            minArr.push(index)
                        }
                    }
                });

                console.log(arr.length);
                console.log('max', maxArr);
                console.log('min', minArr);

                return [minArr, maxArr]
            }

            // var res = getTrendPoint(arr, 0.05);
            var res = getTrendPoint(arr1, 0.2);

            res[0].forEach((ele, idx) => {
                document.getElementById('vol-' + ele).style.background = 'green'
            });
            res[1].forEach((ele, idx) => {
                document.getElementById('vol-' + ele).style.background = 'orange'
            });
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>N</title>
	<style media="screen">
	#con{
	position: relative;
	height: 160px;
	background: #2C323C;
	}

	.vol{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	position: absolute;
	bottom: 0;
	background: red;
	}
	</style>
	</head>
	<body>
	<script src="http://web.ifzq.gtimg.cn/appstock/app/fqkline/get?_var=kline_dayqfq&param=sz000590,day,,,320,qfq&r=0.3237445075722003"></script>
	<div class="" id="con">

	</div>
	<script type="text/javascript">
	'use strict';

	// var arr = kline_dayqfq.data.sz000590.qfqday;

	var arr1 = [20, 41, 29, 33, 24, 26, 43, 52, 40, 28, 23, 25, 37, 38, 42, 29, 17, 15, 26, 26, 32, 49, 51];
	var arr = [22,22.39,22.08,22.18,22.02,22.02,21.9,21.7,21.65,23,23.8,24.2,24.05,24.29,25.17,
	25.4,24.53,25.15,25.07,25.01,25.33,24.68,24.63,24.6,24.99,24.08,23.06,22.91,22.6,22.7,
	23.3,23.4,23.18,22.84,22.52,21.7,21.53,22.88,23.15,23.75,23.8,24.2,24.58,24.93,25,
	25.51,24.59,24.7,25.8,25.91,24.61,23.38,23.5,22.43,21.31,20.24,19.23,18.58,17.87,17.39,
	16.8,17.5,18.39,18.2,18.13,18.3,17.71,17.09,16.43,16.04,16.68,16.69,17.44,17.88,
	18.01,18.7,19.11,19.81,20.04,19.7,19.9,19.53,19.53,18.73,18.33,17.41,17.42,17.45,
	18.36,17.95,18.06,18.69,18.5,18.3,18,18.35,18.86,19.1,19.18,19.61,20.52,20.58,20.95,
	21.45,21.67,21.61,20.65,20.92,21.38,21,20.99,22.05,22.12,22,21.3,21.25,21.23,21.19,
	21.12,21.06,19.63,19,18.7,19.85,19.94,20.07,20.55,21.11,21.11,21.61,21.86,21.3,20.37,
	20.22,20.47,20.59,20.35,20.47,20.56,19.94,19.6,19.9,20.69,20.95,21.3,21.19,21.09,21.45,
	21.31,21.79,21.61,21.62,21.41,21.41,21.33,20.3,20.37,20.2,21.58,21.3,21.4,21.48,21.26,
	21.95,21.59,21.35,22.11,22.12,22,22.18,22.32,
	22.6,22.85,23.69,23.53,23.77,23.6,23.42,23.19,22.95,22.89,22.88,23.29,23.78,23.2].slice(-60);


	var max = Math.max.apply(Math, arr1);
	var min = Math.min.apply(Math, arr1);
	var p = 140 / (max - min);

	var html = arr1.map((ele, idx) => {
	// var ele = dayInfo[2];
	// var bottom = (ele - min) * p + 10;
	var bottom = ele;
	return `<div id="vol-${idx}" class="vol" style="left: ${idx * 20}px; bottom: ${bottom}px"></div>`
	});

	document.getElementById('con').innerHTML = html.join('');

	function getTrendPoint(arr, delta){
	let mod = 1;
	let lastMin = 0, lastMax = 0;
	let minArr = [];
	let maxArr = [];

	/*
	value - min max - min
	------------- = -------------
	height 140
	*/

	arr.forEach((ele, index) => {
	// debugger
	if(index > 0){
	if(mod === 1){
	// 高点
	// if((ele - arr[lastMax]) / arr[lastMax] > .1){
	if(ele >= arr[lastMax]){
	lastMax = index;
	}else if((ele - arr[lastMax]) / arr[lastMax] < -delta){
	// }else{
	// 拐点
	maxArr.push(lastMax);
	lastMin = index;
	mod = 0;
	}
	}else{
	if(ele <= arr[lastMin]){
	// if((ele - arr[lastMin]) / arr[lastMin] < -.1){
	lastMin = index;
	}else if((ele - arr[lastMin]) / arr[lastMin] > delta){
	// }else{
	minArr.push(lastMin);
	lastMax = index;
	mod = 1
	}
	}
	}

	if(index === arr.length - 1){
	if(ele >= arr[lastMax]){
	maxArr.push(index)
	}else if(ele <= arr[lastMin]){
	minArr.push(index)
	}
	}
	});

	console.log(arr.length);
	console.log('max', maxArr);
	console.log('min', minArr);

	return [minArr, maxArr]
	}

	// var res = getTrendPoint(arr, 0.05);
	var res = getTrendPoint(arr1, 0.2);

	res[0].forEach((ele, idx) => {
	document.getElementById('vol-' + ele).style.background = 'green'
	});
	res[1].forEach((ele, idx) => {
	document.getElementById('vol-' + ele).style.background = 'orange'
	});
	</script>
	</body>
	</html>