jquery.flot.js 简单使用

最新推荐文章于 2021-08-06 04:29:07 发布

继续去踢波

最新推荐文章于 2021-08-06 04:29:07 发布

阅读量3.6k

点赞数 2

分类专栏： JS HTML

本文链接：https://blog.csdn.net/LOW584710047/article/details/41079525

版权

JS 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
	<head>
		<meta charset='utf-8'>
		<title>折线图</title>
		<!--[if lte IE 8]>
			<script language="javascript" type="text/javascript" src="./excanvas.min.js"></script>
		<![endif]-->
		<script language="javascript" type="text/javascript" src="./jquery.js"></script>
		<script language="javascript" type="text/javascript" src="./jquery.flot.js"></script>
		<script type="text/javascript">
			$(function() {
				AlPriceQuery();
			});

			function AlPriceQuery(){
				var result = {
					AvgPrice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 14000, 13930],
					Date: ["11-1", "11-2", "11-3", "11-4", "11-5", "11-6", "11-7", "11-8", "11-9", "11-10"],
				}

                var DataArr = [];//y轴数据
                var TickArr = [];//x轴自定义刻度数据
                var PriceArr = [];//价格
                for(var i=0; i<result.Date.length; i++){
            		DataArr.push([ i+1, result.AvgPrice[i] ]);
            		TickArr.push([ i+1, result.Date[i] ]);
            		PriceArr.push(result.AvgPrice[i]);
                }
                var MinPrice = PriceArr.sort(function(a, b){return a - b})[0];//获取最小的铝锭价
                if(MinPrice % 20 == 0){
                	MinPrice = MinPrice - 20;
                }
                else{
                	MinPrice = MinPrice - 30;
                }

                //数据源
                var DataSet = [{
                    "label": "最近 " + result.Date.length + " 日铝锭价",
                    "data": DataArr,//折线图数据
                }];

                //配置
                var Options = {
                    xaxis: {
                        ticks: TickArr,//x轴自定义刻度数据
                    },
                    yaxis: {
                        min: MinPrice,//最小刻度
                        tickSize: 20,//递增量
                    },
                    series: {
                        lines: {
                            show: true,//显示线段
                            lineWidth: 1.5,
                        },
                        points: {
                            show: true,//显示节点
                            radius: 3,
                        },
                        color: "#7AC0DA",
                    },
                    grid: {
                        hoverable: true,//鼠标移动到节点会有效果
                        borderWidth: 1,//最外边的边框
                        backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
                    },
                    legend: {
                        noColumns: 0,
                        labelBoxBorderColor: "#000000",
                        position: "sw",
                        backgroundOpacity: 0.1,
                    },
                    shadowSize: 0,//曲线阴影
                };

                //节点hover事件
                $.fn.UseTooltip = function () {
                    var PrePoint = null, PreLabel = null;
                    $(this).bind("plothover", function (event, pos, item) {
                        if (item) {
                            if ((PreLabel != item.series.label) || (PrePoint != item.dataIndex)) {
                                PrePoint = item.dataIndex;
                                PreLabel = item.series.label;
                                $("#tooltip").remove();
                                
                                $(this).css({
                            		"cursor": "pointer"
                                })

                                if (item.seriesIndex == 0) {
                                    ShowTooltip(
                                        item.pageX + 100,
                                        item.pageY - 10,
                                        "#f7d373",
                                        result.Date[item.dataIndex] + " 铝锭价: " + item.series.data[item.dataIndex][1]);
                                }
                            }
                        }
                        else {
                            PrePoint = null;
                            PreLabel = null;
                            $(this).css({
                        		"cursor": "auto"
                            });
                            $("#tooltip").remove();
                        }
                    });
                };

                if (PriceArr.length > 0) {
                    $.plot($("#placeholder"), DataSet, Options);
                    $("#placeholder").UseTooltip();
                }

			}
			
			//提示框
			function ShowTooltip(x, y, color, contents) {
				$('<div id="tooltip">' + contents + '</div>').css({
				    position: 'absolute',
				    display: 'none',
				    top: y - 40,
				    left: x - 120,
				    border: '2px solid ' + color,
				    padding: '3px',
				    'font-size': '9px',
				    'border-radius': '5px',
				    'background-color': '#fff',
				    'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
				    opacity: 0.9
				}).appendTo("body").fadeIn(200);
			}

		</script>
	</head>
	<body>
		<div id="placeholder" style="width:400px;height:200px;"></div>
	</body>
</html>

继续去踢波

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery.flot.js 简单使用

折线图 $(function() { AlPriceQuery(); }); function AlPriceQuery(){ var result = { AvgPrice : [14030, 13980, 14060, 14000, 13930, 14030, 13980, 14060, 14000, 1393
复制链接

扫一扫