高仿喵喵折前端代码
主要用了Highchart图表插件+jquery 1、主要还存在一个问题提示框应该在最上方的。已解决 2、时间格式化问题。已解决 3、数据点是没有外面这一圈的。已解决 4、x轴最小单位和最大单位选中问题。未解决 jQuery Highcharts $(function () {mmz.init("mmz");})/*
主要用了Highchart图表插件+jquery
1、主要还存在一个问题 提示框应该在最上方的。 已解决
2、时间格式化问题。 已解决
3、数据点是没有外面这一圈的。 已解决
4、x轴最小单位和最大单位选中问题。 未解决
jQuery Highcharts
$(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 // 禁用版权信息 } }); } }

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

What to do with blue screen code 0x0000001? The blue screen error is a warning mechanism when there is a problem with the computer system or hardware. Code 0x0000001 usually indicates a hardware or driver failure. When users suddenly encounter a blue screen error while using their computer, they may feel panicked and at a loss. Fortunately, most blue screen errors can be troubleshooted and dealt with with a few simple steps. This article will introduce readers to some methods to solve the blue screen error code 0x0000001. First, when encountering a blue screen error, we can try to restart

If you need to program any device remotely, this article will help you. We will share the top GE universal remote codes for programming any device. What is a GE remote control? GEUniversalRemote is a remote control that can be used to control multiple devices such as smart TVs, LG, Vizio, Sony, Blu-ray, DVD, DVR, Roku, AppleTV, streaming media players and more. GEUniversal remote controls come in various models with different features and functions. GEUniversalRemote can control up to four devices. Top Universal Remote Codes to Program on Any Device GE remotes come with a set of codes that allow them to work with different devices. you may

Termination Code 0xc000007b While using your computer, you sometimes encounter various problems and error codes. Among them, the termination code is the most disturbing, especially the termination code 0xc000007b. This code indicates that an application cannot start properly, causing inconvenience to the user. First, let’s understand the meaning of termination code 0xc000007b. This code is a Windows operating system error code that usually occurs when a 32-bit application tries to run on a 64-bit operating system. It means it should

As a programmer, I get excited about tools that simplify the coding experience. With the help of artificial intelligence tools, we can generate demo code and make necessary modifications as per the requirement. The newly introduced Copilot tool in Visual Studio Code allows us to create AI-generated code with natural language chat interactions. By explaining functionality, we can better understand the meaning of existing code. How to use Copilot to generate code? To get started, we first need to get the latest PowerPlatformTools extension. To achieve this, you need to go to the extension page, search for "PowerPlatformTool" and click the Install button

Quickly get started with Python drawing: code example for drawing Bingdundun Python is an easy-to-learn and powerful programming language. By using Python's drawing library, we can easily realize various drawing needs. In this article, we will use Python's drawing library matplotlib to draw a simple graph of ice. Bingdundun is a cute panda who is very popular among children. First, we need to install the matplotlib library. You can do this by running in the terminal

What does the 0x000000d1 blue screen code mean? In recent years, with the popularization of computers and the rapid development of the Internet, the stability and security issues of the operating system have become increasingly prominent. A common problem is blue screen errors, code 0x000000d1 is one of them. A blue screen error, or "Blue Screen of Death," is a condition that occurs when a computer experiences a severe system failure. When the system cannot recover from the error, the Windows operating system displays a blue screen with the error code on the screen. These error codes

PHP and Vue: a perfect pairing of front-end development tools. In today's era of rapid development of the Internet, front-end development has become increasingly important. As users have higher and higher requirements for the experience of websites and applications, front-end developers need to use more efficient and flexible tools to create responsive and interactive interfaces. As two important technologies in the field of front-end development, PHP and Vue.js can be regarded as perfect tools when paired together. This article will explore the combination of PHP and Vue, as well as detailed code examples to help readers better understand and apply these two

Django is a web application framework written in Python that emphasizes rapid development and clean methods. Although Django is a web framework, to answer the question whether Django is a front-end or a back-end, you need to have a deep understanding of the concepts of front-end and back-end. The front end refers to the interface that users directly interact with, and the back end refers to server-side programs. They interact with data through the HTTP protocol. When the front-end and back-end are separated, the front-end and back-end programs can be developed independently to implement business logic and interactive effects respectively, and data exchange.
