<script type="text/javascript">// this.avg) { classTag = ‘TK-icon-up‘; iconText.text(‘涨价啦!‘); } else if (this.nPrice < this.avg) { this.color = ‘#63d089‘; classTag = ‘TK-icon-down‘; iconText.text(‘降价啦!‘); } else if (this.nPrice === this.avg){ if (this.lengthSecPrice > this.nPrice) { this.color = ‘#63d089‘; classTag = ‘TK-icon-down‘; iconText.text(‘降价啦!‘); } else if (this.lengthSecPrice < this.nPrice){ classTag = ‘TK-icon-up‘; iconText.text(‘涨价啦!‘); } else { classTag = ‘TK-icon-end‘; iconText.text(‘价格很平稳‘); } } } obj.addClass(classTag); }, initBtn:function (obj, tag) { var timer = null, delay = false; this.msgBox = $(‘.TK-qutu-msg‘); var qutuBox = $(‘.TK-qutu-warp‘); obj.on(‘mouseover‘, function () { clearTimeout(timer); qutuBox.addClass(‘TK-qutu-wrap-hover‘); timer = null; delay = true; }); obj.on(‘mouseout‘, function () { timer = setTimeout(function () { qutuBox.removeClass(‘TK-qutu-wrap-hover‘); delay = false; timer = null; }, 300); }); qutuBox.on({ ‘mouseover‘: function () { clearTimeout(timer); qutuBox.addClass(‘TK-qutu-wrap-hover‘); }, ‘mouseout‘: function () { timer = setTimeout(function () { qutuBox.removeClass(‘TK-qutu-wrap-hover‘); delay = false; timer = null; }, 300); } }); this.getBtnClass(obj, tag); }, getAvg:function (data) { var length = data.length, sum = 0; for (var i =0; i 0) { a.push(item + this.fixs.beginXY - 38); b.push(oldData); } a.push(item - 33); if (this.price[i] === this.min) { minX = item + this.fixs.beginXY - 33; } b.push(oldData); } //a = [64, 91, 91, 243, 243] console.log(a); return { Xpx: a, Xdate: b, minX: minX }; }, /** * 取步长 * @param num * @param type * @returns {*} */ pareSetp: function (num, type) { var setp = 100; if (type === ‘floor‘) { num = Math.floor(num/setp)*setp; } else if (type === ‘ceil‘) { num = Math.ceil(num/setp)*setp; } else { num = Math.round(num/setp)*setp; } if (num === 0) { num = 100; } return num; }, /** * 格式最低价格 * @param min * @param setp * @returns {number} */ parseDownYAxi: function (min, setp, wending) { if (wending) { min = Math.floor(min/setp)*setp - (2*setp); } else { min = Math.floor(min/setp)*setp; } return min; }, /** * 格式化接口数据 * @param data * @returns {{price: Array, date: Array, parseData: Array}} */ getPriceAndDate: function (data) { var p = [], day = [], d = [], item; if (!data[0]) { p = [this.nPrice], day = [new Date().getTime() - 5011200000]; d = []; } else { for (var i = 0; i < data.length; i++) { item = { price: data[i].price, time: new Date(data[i].time).getTime() }; p.push(item.price); day.push(item.time); d.push(item); } } return { price: p, date: day, parseData: d }; }, /** * 取y轴数据 * @param yPriceArr * @param ySetp * @returns {Array} */ getYaxisData: function (yPriceArr, ySetp) { //格式后的y轴数据 var parseYAxis = []; //y轴的起始值 var downYAxi = this.downYAxi; for (var i = 0; i < 6; i ++ ) { parseYAxis.unshift(downYAxi); downYAxi = downYAxi + ySetp; } return parseYAxis; }, getXaerx: function () { //当前时间：1407479196097 //60天前；1402295205064 //60天的偏移量：5184000000 //10的的偏移量：864000000 //2014/7/22 //864000000 10天 //86400000 1天 //518400000 6天 //345600000 3天 var maxDate = new Date().getTime() - 518400000, minDate = maxDate - 5184000000, step = 864000000; this.minDay = Math.round(minDate/86400000); //取Y轴日期数组 //retrue:["6/19", "6/29", "7/9", "7/19", "7/29"] var xDate = []; var starDate; var monthObj = { 0: ‘1‘, 1: ‘2‘, 2: ‘3‘, 3: ‘4‘, 4: ‘5‘, 5: ‘6‘, 6: ‘7‘, 7: ‘8‘, 8: ‘9‘, 9: ‘10‘, 10: ‘11‘, 11: ‘12‘ }; var xTip; for (var i = 0; i < 6; i++) { minDate = minDate + step; starDate = new Date(minDate); xTip = format(monthObj[starDate.getMonth()]) + ‘/‘ + format(starDate.getDate()); xDate.push(xTip); } return xDate; }, dashedLineTo: function (obj, fromX, fromY, toX, toY, pattern) { // default interval distance -> 5px if (typeof pattern === "undefined") { pattern = 5; } // calculate the delta x and delta y var dx = (toX - fromX); var dy = (toY - fromY); var distance = Math.floor(Math.sqrt(dx * dx + dy * dy)); var dashlineInteveral = (pattern <= 0) ? distance : (distance / pattern); var deltay = (dy / distance) * pattern; var deltax = (dx / distance) * pattern; // draw dash line obj.beginPath(); for (var dl = 0; dl < dashlineInteveral; dl++) { if (dl % 2) { obj.lineTo(fromX + dl * deltax, fromY + dl * deltay); } else { obj.moveTo(fromX + dl * deltax, fromY + dl * deltay); } } obj.stroke(); }, getObjXY: function () { var y = this.getYdata().Ypx; var x = this.getXdata().Xpx; var p = this.getYdata().Yprice; var d = this.getXdata().Xdate; var a = [], item; for(var i = 0; i < x.length; i++) { item = { x: x[i], y: y[i], p: p[i], d: d[i] }; a.push(item); } return a; }, /** * 曲线图底图 */ drawCanvasBase: function (color, t) { var canvas = document.getElementById(‘TK-canvas-base‘); var base = this.fixs.beginXY; var baseH = 210 + base, baseW = 408; if (canvas.getContext) { var ctx = canvas.getContext(‘2d‘); var ySetp = 33; ctx.lineWidth = 1; ctx.strokeStyle = "#e6e6e6"; //横线 for (var i = 0; i <= 6; i++) { ctx.beginPath(); ctx.moveTo(base, i * 35 + base); ctx.lineTo(baseW, i * 35 + base); ctx.stroke(); } ctx.beginPath(); ctx.moveTo(base, base); ctx.lineTo(base, baseH); ctx.stroke(); ctx.beginPath(); ctx.moveTo(ySetp, base); ctx.lineTo(ySetp, baseH); ctx.stroke(); for (var k = 1; k <=5; k++) { ctx.beginPath(); ySetp = ySetp + 66; ctx.moveTo(ySetp, base); ctx.lineTo(ySetp, baseH); ctx.stroke(); } ctx.beginPath(); ctx.moveTo(baseW, base); ctx.lineTo(baseW, baseH); ctx.stroke(); ctx.save(); var y = this.getYdata().Ypx; var x = this.getXdata().Xpx; if (t) { for (var j=0; j< y.length; j++) { ctx.beginPath(); ctx.arc(x[j], y[j], 2.5, 0, Math.PI*2, false); ctx.fillStyle = color; ctx.fill(); } ctx.strokeStyle = color; this.dashedLineTo(ctx,x[0], y[0], x[1], y[1], 4); }else { for (var n=0; n< y.length; n++) { ctx.beginPath(); ctx.arc(x[n], y[n], 2.5, 0, Math.PI*2, false); ctx.fillStyle = color; ctx.fill(); ctx.lineWidth = 1; ctx.strokeStyle = color; ctx.beginPath(); ctx.moveTo(x[n], y[n]); ctx.lineTo(x[n+1], y[n + 1]); ctx.stroke(); } ctx.fillText(‘￥ ‘ + parsePrice(this.min, true), this.getXdata().minX - 20, this.getYdata().minY + 18); } } }, drawCanvasLayout: function (color) { var _this = this; var flag = false; _this.msgBox.on(‘mouseover‘, function () { flag = true; _this.msgBox.show(); }); _this.msgBox.on(‘mouseleave‘, function () { setTimeout(function () { _this.msgBox.fadeOut(200); ctx.clearRect(0, 0, canvas.width, canvas.height); bag =false; flag = false; }, 200); }); var canvas = document.getElementById(‘TK-canvas-layout‘); if (canvas.getContext) { var ctx = canvas.getContext(‘2d‘); var xx,yy; var bag = false; /*var yAxis = this.getYdata().Ypx; var xAxis = this.getXdata().Xpx;*/ var hightPointer = function () { var xyObj = _this.getObjXY(); $(xyObj).each(function (i, item) { (function (item) { $(canvas).on(‘mousemove‘, function (e) { xx = e.pageX || e.clientX || 0; yy = e.pageY || e.clientY || 0; xx = (xx - $(canvas).offset().left); yy = (yy - $(canvas).offset().top); //hightPointer(xx, yy); if (yy > (item.y - 4) && xx > (item.x - 4) && yy < (item.y + 4) && xx < (item.x + 4)) { if (!bag) { _this.msgBox.css({ left: (item.x - 16), top: (item.y - 46) }).show(); _this.msgBox.html(‘

高大上的名字－数据可视化