高仿喵喵折前端代码

主要用了Highchart图表插件+jquery
1、主要还存在一个问题   提示框应该在最上方的。 已解决
2、时间格式化问题。 已解决
3、数据点是没有外面这一圈的。 已解决
4、x轴最小单位和最大单位选中问题。 未解决

1. [图片] QQ图片20150907123453.png    

2. [文件] 喵喵折扣.zip ~ 213KB     下载(21)    

3. [文件] mmz.js ~ 5KB     下载(7)    

$(function () {
	mmz.init("mmz");

})
/**
 *author 大灰狼 116311316@qq.com
 *v1.0
 */
var mmz = {
	lowPrice : '', //最低价
	topPrice : '', //最高价
	status : 0, //价格浮动状态 1上升 2下降 3平衡
	init : function (id) {
		mmz.sync(id);
	},
	//需要同步 获取type值和数据 php的时间戳是10位的js是13位的
	sync : function (id) {
		var xData = [1441555200, 1441468800, 1441382400, 1441296000, 1441209600];
		xData = mmz.getXdata(xData);
		var yData = [400, 500, 300, 600, 200];
		var c = new Array();
		xData = mmz.getXdata(xData);
		c = yData.concat();
		mmz.getPrice(yData); //计算最高价格和最低价格
		//载入页面
		for (var i = 0; i < c.length; i++) {
			c[i] = Math.round(c[i] * 10) / 10;
		}
		//和上一次波动的进行比较
		if (c[c.length - 1] - mmz.lowPrice < 0) {
			mmz.status = 4; //历史最低
		}

		var con = mmz.plugin();
		$("#" + id).after(con);
		$(".price_name").bind("mouseover", mmz.showChart);
		$(".price_chart").bind("mouseleave", mmz.hideChart);
		//设置图形参数

		mmz.setChart(xData, c);

	},
	getXdata : function (xData) {
		for (var i = 0; i < xData.length; i++) {
			xData[i] = xData[i] * 1000;
		}
		return xData;
	},
	getPrice : function (data) {
		//获取最大价格和最小价格 和价格状态
		var temp;
		var total = 0.00;
		var nowTotal = parseFloat(data[data.length - 1]) * data.length;
		var k = 0;
		for (var i = 0; i < data.length; i++) {
			for (var j = 0; j < data.length; j++) {

				if (data[i] < data[j] && k == 0) {
					mmz.status = 2;
					k++;
				} else if (data[i] > data[j] && k == 0) {
					mmz.status = 1;
					k++;
				}

				if (data[i] < data[j]) {
					temp = data[i];
					data[i] = data[j];
					data[j] = temp;
				}

			}

			total += parseFloat(data[i]);
		}

		mmz.lowPrice = data[0];
		mmz.topPrice = data[data.length - 1];
		total = Math.round(total * 10) / 10;
		nowTotal = Math.round(nowTotal * 10) / 10;

		if (total == nowTotal) {
			mmz.status = 3;
		}

	},
	/**
	 *type 上涨还是下跌
	 *topPrice 最高价格
	 *lowPrice 最低价格
	 */
	plugin : function () {
		var css;
		var remark;
		switch (mmz.status) {
		case 1:
			css = "price_up";
			remark = "价格上涨";
			break;
		case 2:
			css = "price_down";
			remark = "价格下降";
			break;
		case 3:
			css = "price_balance";
			remark = "价格平稳";
			break;
		case 4:
			css = "price_down";
			remark = "历史最低";
			break;
		}
		var con = '<div class="price_label"><div class="price_logo"></div><div class="price_name"><div class="' + css + '"></div>';
		con = con + '<span id="shuoming">' + remark + '</span></div></div><div class="price_chart"><div class="title-bar">价格趋势</div><div id="pricechart"></div>';
		con = con + '<div class="history">最高价  <br>￥ ' + mmz.topPrice + '<br><br><br><br><br><br>最低价<br>￥ ' + mmz.lowPrice + '</div>';
		return con;
	},

	showChart : function () {
		var x = $(".price_name").offset().left;
		var y = $(".price_name").offset().top;
		var h = $(".price_name").height();
		$(".price_chart").css({
			"left" : x,
			"top" : y + h
		});
		$(".price_chart").show();
	},

	hideChart : function () {
		$(".price_chart").hide();
	},

	setChart : function (xData, yData) {

		$('#pricechart').highcharts({
			title : {
				text : '',
			},

			chart : {
				spacingTop : 55,
				spacingRight : 50
			},

			colors : ['#ff6700'],

			xAxis : {
				minPadding : 0,
				reversed : true, //轴数据反转
				gridLineWidth : 1,
				min : 0,
				max : xData.length - 1,
				categories : xData,
				labels : {
					formatter : function () {
						var m = Highcharts.dateFormat('%m', this.value);
						if (m < 10) {
							m = m.substr(1, 1);
						}
						m = m + "-" + Highcharts.dateFormat('%d', this.value);
						return m;
					}
				}
			},

			yAxis : {
				title : {
					text : ''
				}
			},
			series : [{
					name : '价格',
					data : yData,
				}
			],
			plotOptions : {
				series : {
					animation : false,
					cropThreshold : 10,
					marker : {
						fillColor : '#FFF',
						lineColor : '#FFF',
						radius : 0,
						lineWidth : 0,
						states : {
							//鼠标移动至数据点所显示的样式
							hover : {
								fillColor : '#FFF', //数据点颜色值
								radius : 2, //点半径大小
							}

						}
					}

				},
				line : {
					states : {
						hover : {
							lineWidthPlus : 1,
							marker : {},
							halo : {
								size : 5,
								opacity : 1
							}
						}
					}

				}

			},
			tooltip : {
				backgroundColor : '#ff6700', // 背景颜色
				borderRadius : 0, // 边框圆角

				valueSuffix : '',
				animation : false,
				shadow : false, // 是否启用动画效
				style : { // 文字内容相关样式
					color : "#FFF",
					fontSize : "16px",
					fontWeight : "blod",
					fontFamily : "微软雅黑",
					cursor : "default",
					padding : "4px",
					whiteSpace : "nowrap",
				},
				crosshairs : [{ // 设置准星线样式
						width : 1,
						color : '#ccc'
					}
				],
				formatter : function () {
					return '<b>￥' + this.y +
					'</b><br><span style="font-size:10px">' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '</span>';
				}

			},
			legend : {
				enabled : false
			},
			credits : {
				enabled : false // 禁用版权信息
			}
		});
	}

}