flot插件整合（曲线方法，多轴等）

来源：互联网发布：地图优化精灵编辑：程序博客网时间：2024/05/16 22:59
只做曲线的插件：echarts（强烈推荐），flot。
flot官网：
http://www.flotcharts.org/
实现的效果：
1.自由放大缩小，
2.多条y轴线（或者x轴），
3.可以选择的显示哪几条线，
4.显示坐标，坐标自由选择，
5.标示线
6……等等
这里写图片描述

js到官网去下载。
这里只贴整合的代码
<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>Flot Examples</title>    <link href="layout.css" rel="stylesheet" type="text/css">    <!--[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 language="javascript" type="text/javascript" src="../jquery.flot.selection.js"></script>    <script language="javascript" type="text/javascript" src="../jquery.flot.crosshair.js"></script>    <script language="javascript" type="text/javascript" src="../jquery.flot.threshold.js"></script> </head>    <body>    <h1>Flot Examples</h1>    <div id="placeholder" style="width:700px;height:400px"></div>        <p> <p>Position axis <button class="location">left</button> or <button class="location">right</button>.</p></p>    <p id="choices">Show:</p>    <p><input id="enableTooltip" type="checkbox">Enable tooltip</p>    <p>You selected: <span id="selection"></span></p>    <p id="hoverdata">Mouse hovers at    (<span id="x">0</span>, <span id="y">0</span>). <span id="clickdata"></span></p>    <p><input id="clearSelection" type="button" value="重置" />       <br>       开始时间：<input id="startTime" type="text" placehold="开始时间">       <br>       结束时间：<input id="endTime" type="text" placehold="结束时间">       <br>       <input id="setSelection" type="button" value="选择" />       <br>       y轴的上下限：       <br>       </p>   <!--  <p>Selections are really useful for zooming. Just replot the       chart with min and max values for the axes set to the values       in the "plotselected" event triggered. Enable the checkbox       below and select a region again.</p>    <p><label><input id="zoom" type="checkbox" />Zoom to selection.</label></p> --><script type="text/javascript">$(function () {    var data = [        {            label: "United States",            data: [[1990, 18.9], [1991, 18.7], [1992, 18.4], [1993, 19.3], [1994, 19.5], [1995, 19.3], [1996, 19.4], [1997, 20.2], [1998, 19.8], [1999, 19.9], [2000, 20.4], [2001, 20.1], [2002, 20.0], [2003, 19.8], [2004, 20.4]]        },        {            label: "Russia",             data: [[1992, 13.4], [1993, 12.2], [1994, 10.6], [1995, 10.2], [1996, 10.1], [1997, 9.7], [1998, 9.5], [1999, 9.7], [2000, 9.9], [2001, 9.9], [2002, 9.9], [2003, 10.3], [2004, 10.5]]        },        {            label: "United Kingdom",            data: [[1990, 10.0], [1991, 11.3], [1992, 9.9], [1993, 9.6], [1994, 9.5], [1995, 9.5], [1996, 9.9], [1997, 9.3], [1998, 9.2], [1999, 9.2], [2000, 9.5], [2001, 9.6], [2002, 9.3], [2003, 9.4], [2004, 9.79]]        },        {            label: "Germany",            data: [[1990, 12.4], [1991, 11.2], [1992, 10.8], [1993, 10.5], [1994, 10.4], [1995, 10.2], [1996, 10.5], [1997, 10.2], [1998, 10.1], [1999, 9.6], [2000, 9.7], [2001, 10.0], [2002, 9.7], [2003, 9.8], [2004, 9.79]]        },        {            label: "Denmark",        data: [[1990, 9.7], [1991, 12.1], [1992, 10.3], [1993, 11.3], [1994, 11.7], [1995, 10.6], [1996, 12.8], [1997, 10.8], [1998, 10.3], [1999, 9.4], [2000, 8.7], [2001, 9.0], [2002, 8.9], [2003, 10.1], [2004, 9.80]]        },        {            label: "Sweden",            yaxis:3,            data: [[1990, 5.8], [1991, 6.0], [1992, 5.9], [1993, 5.5], [1994, 5.7], [1995, 5.3], [1996, 6.1], [1997, 5.4], [1998, 5.4], [1999, 5.1], [2000, 5.2], [2001, 5.4], [2002, 6.2], [2003, 5.9], [2004, 5.89]]        },        {            label: "Norway",            yaxis:2,            data: [[1990, 8.3], [1991, 8.3], [1992, 7.8], [1993, 8.3], [1994, 8.4], [1995, 5.9], [1996, 6.4], [1997, 6.7], [1998, 6.9], [1999, 7.6], [2000, 7.4], [2001, 8.1], [2002, 12.5], [2003, 9.9], [2004, 19.0]]        }    ];    //选择显示不显示的    var choiceContainer = $("#choices");    $.each(data, function(key, val) {        choiceContainer.append('<br/><input type="checkbox" name="' + key +                               '" checked="checked" id="id' + key + '">' +                               '<label for="id' + key + '">'                                + val.label + '</label>');    });    choiceContainer.find("input").click(function(){        plotAccordingToChoices();    });  //启动画图的方法    var plotAccordingToChoices = function(){        console.log(choiceContainer);         var data1 = [];         choiceContainer.find("input:checked").each(function () {             var key = $(this).attr("name");             if (key && data[key])                 data1.push(data[key]);         });        $.plot(placeholder, data1, options);    }  //获取点信息    var previousPoint = null;    $("#placeholder").bind("plothover", function (event, pos, item) {        //alert("test")        $("#x").text(pos.x.toFixed(2));        $("#y").text(pos.y.toFixed(2));        if ($("#enableTooltip:checked").length > 0) {            if (item) {                if (previousPoint != item.dataIndex) {                    previousPoint = item.dataIndex;                    $("#tooltip").remove();                    var x = item.datapoint[0].toFixed(2),                        y = item.datapoint[1].toFixed(2);                    showTooltip(item.pageX, item.pageY,                                item.series.label + " of " + x + " = " + y);                }            }            else {                $("#tooltip").remove();                previousPoint = null;                        }        }    });   var  position ="right";    var options = {        series: {            lines: { show: true },            points: { show: true }        },       crosshair: { mode: "x" },       //crosshair: { mode: "y" },        legend: { noColumns: 2 },        xaxis: { tickDecimals: 0 },      //  yaxis: { min: 0 },        grid: { hoverable: true, clickable: true, autoHighlight: false  } ,        yaxes: [ {min: 3} , {max: 20},{            // align if we are to the right            alignTicksWithAxis:  position == "right" ? 1 : null,            position: position,            tickFormatter: euroFormatter          } ],        selection: { mode: "x" }    };    var placeholder = $("#placeholder");    placeholder.bind("plotselected", function (event, ranges) {        $("#selection").text(ranges.xaxis.from.toFixed(1) + " to " + ranges.xaxis.to.toFixed(1));       // var zoom = $("#zoom").attr("checked");        //if (zoom)            var data1 = [];         choiceContainer.find("input:checked").each(function () {             var key = $(this).attr("name");             if (key && data[key])                 data1.push(data[key]);         });            plot = $.plot(placeholder, data1,                          $.extend(true, {}, options, {                              xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }                          }));    });    placeholder.bind("plotunselected", function (event) {        $("#selection").text("");    });    var plot = $.plot(placeholder, data, options);    $("#clearSelection").click(function () {         $.plot(placeholder, data, options);    });    $("#setSelection").click(function () {        var startTime = $("#startTime").val();        var endTime = $("#endTime").val();        plot.setSelection({ xaxis: { from: startTime, to: endTime } });    });    function euroFormatter(v, axis) {        return v.toFixed(axis.tickDecimals)+"$";    }$(".location").click(function () {    var data1 = [];    choiceContainer.find("input:checked").each(function () {        var key = $(this).attr("name");        if (key && data[key])            data1.push(data[key]);    });        position = $(this).text();        $.plot(placeholder, data1, {            series: {                lines: { show: true },                points: { show: true }            },            legend: { noColumns: 2 },            xaxis: { tickDecimals: 0 },          //  yaxis: { min: 0 },            grid: { hoverable: true, clickable: true } ,            yaxes: [ {min: 3} , {max: 20},{                // align if we are to the right                alignTicksWithAxis:  position == "right" ? 1 : null,                position: position,                tickFormatter: euroFormatter              } ],            selection: { mode: "x" }        });    });    //显示曲线信息的divfunction showTooltip(x, y, contents) {    $('<div id="tooltip">' + contents + '</div>').css( {        position: 'absolute',        display: 'none',        top: y + 5,        left: x + 5,        border: '1px solid #fdd',        padding: '2px',        'background-color': '#fee',        opacity: 0.80    }).appendTo("body").fadeIn(200);}});</script> </body></html>
我觉得echarts更加丰富和强大，之后会有相关代码整合。
阅读全文
0 0