JavaScript可视化——Flot跟踪数据的值

最新推荐文章于 2019-12-23 16:20:50 发布

绝尘花遗落

最新推荐文章于 2019-12-23 16:20:50 发布

阅读量380

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/huayunhualuo/article/details/103616597

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

跟踪数据的值

用户既可以看到概况的趋势，又可以看到指定的详情。

保存所有图表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/flot/0.8.3/jquery.flot.min.js"></script>
</head>
<body>
    <div id="charts"></div>
</body>
</html>

创建一个div元素来盛放我们构建的图表。指定div的大小。

$.each(exports, function(idx, region){
                var div = $("<div>").css({
                    width: "600px",
                    height: "50px" 
                });
                $("#charts").append(div);
            })

使用jQuery的.each()函数来循环数组，这个函数接受两个参数：一个数组对象（exports）和一个函数。每次的循环出一个对象，用这个对象和索引当作参数传递给后面的那个参数。

准备数据

exports = [
            { label: "East Asia & Pacific",        data: [[1960,13.2276851887342],[1961,11.7963550115751],[1962,11.8527980604573],[1963,11.5193731199916],[1964,12.1462436254811],[1965,14.7735530286652],[1966,15.392959002981],[1967,14.7075382740546],[1968,15.624382546969],[1969,16.2816050814992],[1970,14.5649474898921],[1971,15.2884641261261],[1972,15.0015320021371],[1973,16.0284929526502],[1974,18.6511317729209],[1975,17.5804113463697],[1976,18.9436231952687],[1977,18.7821652757197],[1978,17.9488824204533],[1979,19.0468767857484],[1980,21.3393417930367],[1981,22.0909822022235],[1982,21.3090391197168],[1983,20.8442411776676],[1984,21.8400993915342],[1985,21.1458104329789],[1986,19.757946686421],[1987,20.6412220711762],[1988,20.9264902385545],[1989,20.5902982946096],[1990,20.6814669463882],[1991,20.6645429837375],[1992,20.6924775643734],[1993,20.4336023800945],[1994,20.845289346812],[1995,21.5602831916366],[1996,21.6864023007465],[1997,22.906249785916],[1998,24.2127839857015],[1999,23.352678984083],[2000,25.3374687942381],[2001,24.4607627993162],[2002,25.2650793852501],[2003,27.1463987585805],[2004,29.8875064650765],[2005,31.3917164652029],[2006,33.3278063791139],[2007,34.2228863625396],[2008,34.7899262988985],[2009,29.0476124098204],[2010,32.1722358333244],[2011,33.0010633522658]]},
            { label: "Europe & Central Asia",      data: [[1960,19.6961338419723],[1961,19.4263903109578],[1962,19.0734034092803],[1963,18.9387571341282],[1964,19.0832256139865],[1965,19.2946988304665],[1966,19.4998532548064],[1967,19.200188149306],[1968,20.2082693324487],[1969,21.1367934284921],[1970,20.4843044277948],[1971,20.4997307068905],[1972,20.4905301794328],[1973,21.6273425199398],[1974,24.7556277274978],[1975,23.0308947334987],[1976,24.1103251055369],[1977,24.5909475817424],[1978,24.3243030088367],[1979,25.1154698344328],[1980,25.6824524877455],[1981,27.0170313493366],[1982,27.0796299973304],[1983,27.3979773141537],[1984,29.1846266640435],[1985,29.5213373257113],[1986,26.4658761485097],[1987,25.9309536203352],[1988,26.0544615588169],[1989,27.0875113337688],[1990,26.8989516439025],[1991,26.6709015495564],[1992,27.7651674424686],[1993,27.3545458678608],[1994,28.369217241554],[1995,29.8885534752313],[1996,30.318073918799],[1997,32.0912352355683],[1998,32.3133372651189],[1999,32.8439011709889],[2000,36.2760907452683],[2001,36.1996099048017],[2002,35.3053920392553],[2003,34.5615153605405],[2004,35.8315654131583],[2005,37.1633367985355],[2006,39.3847151036765],[2007,39.8029366982984],[2008,40.7666142018548],[2009,36.4024694388194],[2010,39.6998241363],[2011,42.1714373233388]]},
            { label: "Latin America & Caribbean",  data: [[1960,11.6801502887395],[1961,11.3068909825283],[1962,9.97309295285666],[1963,12.0317810092424],[1964,10.5444686012308],[1965,11.0047958728952],[1966,10.7325991368299],[1967,10.2989619967186],[1968,10.3163959201847],[1969,10.599783107639],[1970,10.8576274587034],[1971,10.3325749300224],[1972,10.9702596266082],[1973,12.0589626872199],[1974,13.3468415036769],[1975,11.9939213617285],[1976,12.5891378419163],[1977,13.5394722623608],[1978,13.053399273666],[1979,13.8315865018492],[1980,14.6318252137661],[1981,14.1820944144479],[1982,14.821027293738],[1983,16.9316858199973],[1984,17.6251531823604],[1985,17.5042284635814],[1986,16.119768783866],[1987,16.6993232372486],[1988,17.889447887822],[1989,18.4934356031643],[1990,17.2531165484436],[1991,15.9173222169095],[1992,16.9266968463263],[1993,16.4380776103162],[1994,16.5637373981862],[1995,19.9306959714869],[1996,20.5249314107752],[1997,19.7368777125796],[1998,19.2402544769975],[1999,20.3665517169769],[2000,21.2674511194714],[2001,20.8103491951474],[2002,23.9379669771566],[2003,24.2371887383376],[2004,25.644895888235],[2005,25.6485125271523],[2006,25.8229227711689],[2007,25.1220734261609],[2008,25.1499944862104],[2009,22.2265963037048],[2010,23.6355416877128],[2011,23.4716727623892]]},
            { label: "Middle East & North Africa", data: [[1968,31.1954177605503],[1969,31.7532529831496],[1970,32.8237340314584],[1971,34.7691366131319],[1972,36.9923168026396],[1973,49.7819316540798],[1974,45.3845558951964],[1975,46.1395528114332],[1976,42.5935638169774],[1977,41.2226890670249],[1978,38.025661102971],[1979,42.0240110913826],[1980,42.8324808711264],[1981,42.4055018084372],[1982,36.8277815986071],[1983,32.3090877438323],[1984,31.0779265154029],[1985,29.4370693262713],[1986,24.4390675691177],[1987,27.030237340151],[1988,26.9057588528943],[1989,28.5322869730439],[1990,31.8635763937074],[1991,29.6799247729981],[1992,30.7107074561456],[1993,31.4958669148517],[1994,31.8699580120762],[1995,31.5168366196111],[1996,32.1653504917391],[1997,31.456930199297],[1998,26.6130023089219],[1999,30.542038536622],[2000,36.0114784286415],[2001,34.8841891512082],[2002,36.3238453040025],[2003,39.5771649404076],[2004,44.065950650746],[2005,48.4776410382859],[2006,49.4755109777419],[2007,49.7233865337523],[2008,54.0728367559881],[2009,44.0788366315137],[2010,45.5278302716793]]},
            { label: "North America",              data: [[1960,5.94754327218195],[1961,5.92748715818847],[1962,5.82680801788986],[1963,5.92540080473158],[1964,6.21758930041988],[1965,6.06570506420214],[1966,6.14885214241397],[1967,6.2320872942773],[1968,6.33580926376179],[1969,6.36006573222534],[1970,6.88876422201218],[1971,6.67777678552917],[1972,6.80427193995872],[1973,8.00559848264531],[1974,9.55759320325411],[1975,9.4393954324239],[1976,9.1589415612032],[1977,8.89591296242441],[1978,9.29730938599535],[1979,10.1965027290889],[1980,11.3028057083913],[1981,10.9346501604645],[1982,9.86474906803964],[1983,9.0309584062782],[1984,9.09976766519785],[1985,8.57495931810531],[1986,8.56759112911168],[1987,8.9723543125207],[1988,9.92708416485426],[1989,10.3084286019779],[1990,10.6457960274042],[1991,11.0305505721746],[1992,11.2339107004334],[1993,11.2646964199533],[1994,11.8335841544427],[1995,12.7568858481879],[1996,12.9478457113902],[1997,13.3603630283757],[1998,12.8815121298915],[1999,12.7350723006425],[2000,13.2704733197558],[2001,12.2020797739052],[2002,11.5402434865045],[2003,11.2400844659383],[2004,11.8358462338256],[2005,12.1582006160079],[2006,12.6693167660766],[2007,13.391711895893],[2008,14.4173948139286],[2009,12.5385969514618],[2010,13.8639721540984],[2011,15.0782435440303]]},
            { label: "South Asia",                 data: [[1960,5.70858107039607],[1961,5.58067092255634],[1962,5.47386897904943],[1963,5.46535397218645],[1964,4.95934426187296],[1965,4.65879667211718],[1966,5.26997707946099],[1967,5.46835451845537],[1968,5.40697860254654],[1969,5.04207163165542],[1970,5.18643063673445],[1971,4.85196389375989],[1972,5.52975382514087],[1973,5.97778216101029],[1974,6.27896931907707],[1975,6.57611948068063],[1976,7.56369610033929],[1977,7.50526771590905],[1978,7.33453718123928],[1979,7.82439473212815],[1980,7.60725113913815],[1981,7.39363587943556],[1982,7.06455717952971],[1983,7.14155450720459],[1984,7.1989219087044],[1985,6.46898262008126],[1986,6.50206413328255],[1987,6.99517788157208],[1988,7.41924119628763],[1989,8.23610832868556],[1990,8.55451743624778],[1991,9.8108313873773],[1992,10.3173148583811],[1993,11.1433526427079],[1994,11.1947252827273],[1995,12.245678814517],[1996,11.8981020737746],[1997,12.1934226343976],[1998,12.5561764997632],[1999,12.7747607030488],[2000,13.8978924450432],[2001,13.7043216681814],[2002,14.9778075894547],[2003,15.6784668668869],[2004,17.8165795679021],[2005,19.1072703192181],[2006,20.5586174659141],[2007,20.0091409944781],[2008,22.2215822543986],[2009,19.3862828436976],[2010,21.3637889508312],[2011,23.2417030986612]]},
            { label: "Sub-Saharan Africa",         data: [[1960,25.5082919987422],[1961,25.3967773829262],[1962,25.1513207204418],[1963,25.5604700351516],[1964,25.3764620706126],[1965,24.1720056044611],[1966,23.9473505637721],[1967,23.1708677868734],[1968,23.7006023135273],[1969,22.8548438248376],[1970,21.8363985230441],[1971,21.7465020197567],[1972,23.5933285153941],[1973,24.2284484067143],[1974,27.9894806993338],[1975,25.3782250522716],[1976,26.4445568645147],[1977,28.4323827652335],[1978,28.2407545259293],[1979,30.3521260132356],[1980,31.917317287295],[1981,26.5400231625996],[1982,24.7747478424802],[1983,23.8817206037714],[1984,25.2744113314672],[1985,28.2894089087691],[1986,27.3511102707732],[1987,28.0077656429154],[1988,26.4212638615689],[1989,26.7086793755833],[1990,26.3876153111575],[1991,24.1693577701585],[1992,25.0669216843661],[1993,26.1576055766999],[1994,27.9355565590642],[1995,27.8004944512353],[1996,29.8041432729699],[1997,28.7978103968031],[1998,27.5741510834576],[1999,28.2655108010711],[2000,32.5347628932871],[2001,31.9725896316694],[2002,32.1351335294832],[2003,31.1255948548804],[2004,31.2391270237925],[2005,32.80491104427],[2006,33.734986466356],[2007,34.6169758938263],[2008,36.8990503688163],[2009,29.8949887488995],[2010,31.412629197565],[2011,33.5660459229262]]}
];

exports数组包含了所有地区，每个地区是一个对象，每个对象包含了label属性和数据集合。

绘制图表

$.plot(div, [region.data], {
                    series: {
                        lines: {
                            fill: true,
                            lineWidth: 1
                        },
                        shadowSize: 0
                    },
                    xaxis: {
                        show: true,
                        labelHeight: 0,
                        min: 1960,
                        max: 2011,
                        tickFormatter : function(){
                            return "";
                        }
                    },
                    yaxis: {
                        show: false,
                        min: 0,
                        max: 60,
                    },
                    grid: {
                        show: true,
                        margin: 0,
                        borderWidth: 0,
                        borderColor: null,
                        labelMargin: 0,
                        axisMargin: 0,
                        minBorderMargin: 0
                    }
                });

使用plot函数来绘制图表。series选项用来展现数据集合，用fill选项将折线处填实。xaxis定义x轴数据，yaxis定义y轴数据，不显示坐标轴。grid用来添加网格。

为每个图例插入legends元素。

var legend = $('<p>').text(region.label).css({
                    'height': '17px',
                    'margin-bottom': '0',
                    'margin-left': '10px',
                    'margin-top': '0',
                    'padding-top': '33px'
                });
                $("#chart-legends").append(legend);

为了在一个图表的x轴上添加标注，用一个不可见的数据创建一个虚拟的图表，并把它定为在最后一个图表的下面。

var dumy = [];
            for(let i = 1960; i < 2012; i++) dumy.push([i,0]);
            var div = $("<div>").css({
                'width': '600px',
                'height':'15px'
            });
            $("#charts").append(div);
            var dummyPlot = $.plot(div, [dumy],{
                xaxis: {
                    show:true,
                    labelHeight: 12,
                    min: 1960,
                    max: 2011
                },
                yaxis:{
                    show: false,
                    min:100,
                    max:200
                },
                grid:{
                    show:true,
                    margin:0,
                    borderWidth:0,
                    labelMargin:0,
                    axisMargin:0,
                    minBorderMargin:0
                }
            });

在这里插入图片描述

实施交互

对于可视化，跟踪鼠标在图表上划过的轨迹，plot函数的grid选项包含了hoverable属性，默认为false。如果设置为true，鼠标在图表区移动时，Float将在鼠标移动图标区域触发plothover事件。还有一个更好的方法，我们如果在di为charts的div上面建立一个事件监听，就可以捕获所有图表中的plothover事件。

$("#charts").on("plothover", function(){
//鼠标在图表上时
}).on("mouseout", function(){
//鼠标不在图表上时
});

为了响应plothover事件，想要显示一条贯穿所有图表的垂直的线。可以给div元素增加边框来实现一根线。为了让他移动，我们使用绝对定位。z-index的值来确保浏览器在所有图表的上方绘制这根线。一开始设置display为none来隐藏。

<div id="charts-wrapper" style="position: relative;margin-left: 20px;">
        <div id="marker" style="position: absolute;z-index: 1;display: none;width: 1px;border-left: 1px solid black;"></div>
        <div id="charts" style="float: left;"></div>
        <div id="chart-legends" style="float: left;"></div>
    </div>

当Flot调用函数监听plothover事件时，需要传递3个参数，JavaScript事件对象，用x和y的坐标表示的鼠标位置，以及如果鼠标靠近图表的数据时，会显示的这个数据点的详情。

$("#charts").on("plothover", function(ev, pos){
                var year = Math.round(pos.x);
                var left = dummyPlot.pointOffset(pos).left;
                var height = $("#charts").height();
                $("$marker").css({
                    'top': 0,
                    'left':left,
                    'width': '1px',
                    'height': height
                }).show();
            })

当鼠标已经移开的时候

on("mouseout", function(ev){
                if(ev.relatedTarget.id !== "marker") {
                    $("#marker").hide();
                }
            });

当这些div在文档中加载完后，处理程序plothover就可以为每一个图标设置文本。并在页面的水平位置显示它们。

在这里插入图片描述

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/flot/0.8.3/jquery.flot.min.js"></script>
</head>

<body>
    <div id="charts-wrapper" style="position: relative;margin-left: 20px;">
        <div id="marker" style="position: absolute;z-index: 1;display: none;width: 1px;border-left: 1px solid black;">
        </div>
        <div id="charts" style="float: left;"></div>
        <div id="chart-legends" style="float: left;"></div>
    </div>
    <script>
        $(function () {
            exports = [
                { label: "East Asia & Pacific", data: [[1960, 13.2276851887342], [1961, 11.7963550115751], [1962, 11.8527980604573], [1963, 11.5193731199916], [1964, 12.1462436254811], [1965, 14.7735530286652], [1966, 15.392959002981], [1967, 14.7075382740546], [1968, 15.624382546969], [1969, 16.2816050814992], [1970, 14.5649474898921], [1971, 15.2884641261261], [1972, 15.0015320021371], [1973, 16.0284929526502], [1974, 18.6511317729209], [1975, 17.5804113463697], [1976, 18.9436231952687], [1977, 18.7821652757197], [1978, 17.9488824204533], [1979, 19.0468767857484], [1980, 21.3393417930367], [1981, 22.0909822022235], [1982, 21.3090391197168], [1983, 20.8442411776676], [1984, 21.8400993915342], [1985, 21.1458104329789], [1986, 19.757946686421], [1987, 20.6412220711762], [1988, 20.9264902385545], [1989, 20.5902982946096], [1990, 20.6814669463882], [1991, 20.6645429837375], [1992, 20.6924775643734], [1993, 20.4336023800945], [1994, 20.845289346812], [1995, 21.5602831916366], [1996, 21.6864023007465], [1997, 22.906249785916], [1998, 24.2127839857015], [1999, 23.352678984083], [2000, 25.3374687942381], [2001, 24.4607627993162], [2002, 25.2650793852501], [2003, 27.1463987585805], [2004, 29.8875064650765], [2005, 31.3917164652029], [2006, 33.3278063791139], [2007, 34.2228863625396], [2008, 34.7899262988985], [2009, 29.0476124098204], [2010, 32.1722358333244], [2011, 33.0010633522658]] },
                { label: "Europe & Central Asia", data: [[1960, 19.6961338419723], [1961, 19.4263903109578], [1962, 19.0734034092803], [1963, 18.9387571341282], [1964, 19.0832256139865], [1965, 19.2946988304665], [1966, 19.4998532548064], [1967, 19.200188149306], [1968, 20.2082693324487], [1969, 21.1367934284921], [1970, 20.4843044277948], [1971, 20.4997307068905], [1972, 20.4905301794328], [1973, 21.6273425199398], [1974, 24.7556277274978], [1975, 23.0308947334987], [1976, 24.1103251055369], [1977, 24.5909475817424], [1978, 24.3243030088367], [1979, 25.1154698344328], [1980, 25.6824524877455], [1981, 27.0170313493366], [1982, 27.0796299973304], [1983, 27.3979773141537], [1984, 29.1846266640435], [1985, 29.5213373257113], [1986, 26.4658761485097], [1987, 25.9309536203352], [1988, 26.0544615588169], [1989, 27.0875113337688], [1990, 26.8989516439025], [1991, 26.6709015495564], [1992, 27.7651674424686], [1993, 27.3545458678608], [1994, 28.369217241554], [1995, 29.8885534752313], [1996, 30.318073918799], [1997, 32.0912352355683], [1998, 32.3133372651189], [1999, 32.8439011709889], [2000, 36.2760907452683], [2001, 36.1996099048017], [2002, 35.3053920392553], [2003, 34.5615153605405], [2004, 35.8315654131583], [2005, 37.1633367985355], [2006, 39.3847151036765], [2007, 39.8029366982984], [2008, 40.7666142018548], [2009, 36.4024694388194], [2010, 39.6998241363], [2011, 42.1714373233388]] },
                { label: "Latin America & Caribbean", data: [[1960, 11.6801502887395], [1961, 11.3068909825283], [1962, 9.97309295285666], [1963, 12.0317810092424], [1964, 10.5444686012308], [1965, 11.0047958728952], [1966, 10.7325991368299], [1967, 10.2989619967186], [1968, 10.3163959201847], [1969, 10.599783107639], [1970, 10.8576274587034], [1971, 10.3325749300224], [1972, 10.9702596266082], [1973, 12.0589626872199], [1974, 13.3468415036769], [1975, 11.9939213617285], [1976, 12.5891378419163], [1977, 13.5394722623608], [1978, 13.053399273666], [1979, 13.8315865018492], [1980, 14.6318252137661], [1981, 14.1820944144479], [1982, 14.821027293738], [1983, 16.9316858199973], [1984, 17.6251531823604], [1985, 17.5042284635814], [1986, 16.119768783866], [1987, 16.6993232372486], [1988, 17.889447887822], [1989, 18.4934356031643], [1990, 17.2531165484436], [1991, 15.9173222169095], [1992, 16.9266968463263], [1993, 16.4380776103162], [1994, 16.5637373981862], [1995, 19.9306959714869], [1996, 20.5249314107752], [1997, 19.7368777125796], [1998, 19.2402544769975], [1999, 20.3665517169769], [2000, 21.2674511194714], [2001, 20.8103491951474], [2002, 23.9379669771566], [2003, 24.2371887383376], [2004, 25.644895888235], [2005, 25.6485125271523], [2006, 25.8229227711689], [2007, 25.1220734261609], [2008, 25.1499944862104], [2009, 22.2265963037048], [2010, 23.6355416877128], [2011, 23.4716727623892]] },
                { label: "Middle East & North Africa", data: [[1968, 31.1954177605503], [1969, 31.7532529831496], [1970, 32.8237340314584], [1971, 34.7691366131319], [1972, 36.9923168026396], [1973, 49.7819316540798], [1974, 45.3845558951964], [1975, 46.1395528114332], [1976, 42.5935638169774], [1977, 41.2226890670249], [1978, 38.025661102971], [1979, 42.0240110913826], [1980, 42.8324808711264], [1981, 42.4055018084372], [1982, 36.8277815986071], [1983, 32.3090877438323], [1984, 31.0779265154029], [1985, 29.4370693262713], [1986, 24.4390675691177], [1987, 27.030237340151], [1988, 26.9057588528943], [1989, 28.5322869730439], [1990, 31.8635763937074], [1991, 29.6799247729981], [1992, 30.7107074561456], [1993, 31.4958669148517], [1994, 31.8699580120762], [1995, 31.5168366196111], [1996, 32.1653504917391], [1997, 31.456930199297], [1998, 26.6130023089219], [1999, 30.542038536622], [2000, 36.0114784286415], [2001, 34.8841891512082], [2002, 36.3238453040025], [2003, 39.5771649404076], [2004, 44.065950650746], [2005, 48.4776410382859], [2006, 49.4755109777419], [2007, 49.7233865337523], [2008, 54.0728367559881], [2009, 44.0788366315137], [2010, 45.5278302716793]] },
                { label: "North America", data: [[1960, 5.94754327218195], [1961, 5.92748715818847], [1962, 5.82680801788986], [1963, 5.92540080473158], [1964, 6.21758930041988], [1965, 6.06570506420214], [1966, 6.14885214241397], [1967, 6.2320872942773], [1968, 6.33580926376179], [1969, 6.36006573222534], [1970, 6.88876422201218], [1971, 6.67777678552917], [1972, 6.80427193995872], [1973, 8.00559848264531], [1974, 9.55759320325411], [1975, 9.4393954324239], [1976, 9.1589415612032], [1977, 8.89591296242441], [1978, 9.29730938599535], [1979, 10.1965027290889], [1980, 11.3028057083913], [1981, 10.9346501604645], [1982, 9.86474906803964], [1983, 9.0309584062782], [1984, 9.09976766519785], [1985, 8.57495931810531], [1986, 8.56759112911168], [1987, 8.9723543125207], [1988, 9.92708416485426], [1989, 10.3084286019779], [1990, 10.6457960274042], [1991, 11.0305505721746], [1992, 11.2339107004334], [1993, 11.2646964199533], [1994, 11.8335841544427], [1995, 12.7568858481879], [1996, 12.9478457113902], [1997, 13.3603630283757], [1998, 12.8815121298915], [1999, 12.7350723006425], [2000, 13.2704733197558], [2001, 12.2020797739052], [2002, 11.5402434865045], [2003, 11.2400844659383], [2004, 11.8358462338256], [2005, 12.1582006160079], [2006, 12.6693167660766], [2007, 13.391711895893], [2008, 14.4173948139286], [2009, 12.5385969514618], [2010, 13.8639721540984], [2011, 15.0782435440303]] },
                { label: "South Asia", data: [[1960, 5.70858107039607], [1961, 5.58067092255634], [1962, 5.47386897904943], [1963, 5.46535397218645], [1964, 4.95934426187296], [1965, 4.65879667211718], [1966, 5.26997707946099], [1967, 5.46835451845537], [1968, 5.40697860254654], [1969, 5.04207163165542], [1970, 5.18643063673445], [1971, 4.85196389375989], [1972, 5.52975382514087], [1973, 5.97778216101029], [1974, 6.27896931907707], [1975, 6.57611948068063], [1976, 7.56369610033929], [1977, 7.50526771590905], [1978, 7.33453718123928], [1979, 7.82439473212815], [1980, 7.60725113913815], [1981, 7.39363587943556], [1982, 7.06455717952971], [1983, 7.14155450720459], [1984, 7.1989219087044], [1985, 6.46898262008126], [1986, 6.50206413328255], [1987, 6.99517788157208], [1988, 7.41924119628763], [1989, 8.23610832868556], [1990, 8.55451743624778], [1991, 9.8108313873773], [1992, 10.3173148583811], [1993, 11.1433526427079], [1994, 11.1947252827273], [1995, 12.245678814517], [1996, 11.8981020737746], [1997, 12.1934226343976], [1998, 12.5561764997632], [1999, 12.7747607030488], [2000, 13.8978924450432], [2001, 13.7043216681814], [2002, 14.9778075894547], [2003, 15.6784668668869], [2004, 17.8165795679021], [2005, 19.1072703192181], [2006, 20.5586174659141], [2007, 20.0091409944781], [2008, 22.2215822543986], [2009, 19.3862828436976], [2010, 21.3637889508312], [2011, 23.2417030986612]] },
                { label: "Sub-Saharan Africa", data: [[1960, 25.5082919987422], [1961, 25.3967773829262], [1962, 25.1513207204418], [1963, 25.5604700351516], [1964, 25.3764620706126], [1965, 24.1720056044611], [1966, 23.9473505637721], [1967, 23.1708677868734], [1968, 23.7006023135273], [1969, 22.8548438248376], [1970, 21.8363985230441], [1971, 21.7465020197567], [1972, 23.5933285153941], [1973, 24.2284484067143], [1974, 27.9894806993338], [1975, 25.3782250522716], [1976, 26.4445568645147], [1977, 28.4323827652335], [1978, 28.2407545259293], [1979, 30.3521260132356], [1980, 31.917317287295], [1981, 26.5400231625996], [1982, 24.7747478424802], [1983, 23.8817206037714], [1984, 25.2744113314672], [1985, 28.2894089087691], [1986, 27.3511102707732], [1987, 28.0077656429154], [1988, 26.4212638615689], [1989, 26.7086793755833], [1990, 26.3876153111575], [1991, 24.1693577701585], [1992, 25.0669216843661], [1993, 26.1576055766999], [1994, 27.9355565590642], [1995, 27.8004944512353], [1996, 29.8041432729699], [1997, 28.7978103968031], [1998, 27.5741510834576], [1999, 28.2655108010711], [2000, 32.5347628932871], [2001, 31.9725896316694], [2002, 32.1351335294832], [2003, 31.1255948548804], [2004, 31.2391270237925], [2005, 32.80491104427], [2006, 33.734986466356], [2007, 34.6169758938263], [2008, 36.8990503688163], [2009, 29.8949887488995], [2010, 31.412629197565], [2011, 33.5660459229262]] }
            ];

            $.each(exports, function (idx, region) {
                var div = $("<div>").css({
                    width: "600px",
                    height: "50px"
                });
                $("#charts").append(div);
                $.plot(div, [region.data], {
                    series: { lines: { fill: true, lineWidth: 1 }, shadowSize: 0 },
                    xaxis: { show: true, labelHeight: 0, min: 1960, max: 2011, tickFormatter: function () { return ""; } },
                    yaxis: { show: false, min: 0, max: 60 },
                    grid: { show: true, margin: 0, borderWidth: 0, borderColor: null, margin: 0, labelMargin: 0, axisMargin: 0, minBorderMargin: 0, hoverable: true, autoHighlight: false },
                });
                var legend = $("<p>").text(region.label).css({
                    'height': "17px",
                    'margin-bottom': "0",
                    'margin-left': "10px",
                    'margin-top': "0",
                    'padding-top': "33px"
                });
                $("#chart-legends").append(legend);
                var value = $("<div>").css({
                    'position': "absolute",
                    'top': (div.position().top - 3) + "px",
                    'display': "none",
                    'z-index': 1,
                    'font-size': "11px",
                    'color': "black" // "#fc7d00"
                });
                region.value = value;
                $("#charts-wrapper").append(value);
            });

            var dummy = []
            for (var i = 1960; i < 2012; i++) dummy.push([i, 0]);

            var div = $("<div>").css({
                width: "600px",
                height: "15px"
            });
            $("#charts").append(div);
            var dummyPlot = $.plot(div, [dummy], {
                xaxis: { show: true, labelHeight: 12, min: 1960, max: 2011 },
                yaxis: { show: false, min: 100, max: 200 },
                grid: { show: true, margin: 0, borderWidth: 0, margin: 0, labelMargin: 0, axisMargin: 0, minBorderMargin: 0 },
            });
            $("#charts").on("plothover", function (ev, pos) {
                var year = Math.round(pos.x);
                var left = dummyPlot.pointOffset(pos).left;
                var height = $("#charts").height();
                $("#marker").css({
                    'top': 0,
                    'left': left,
                    'width': "1px",
                    'height': height
                }).show();
                $.each(exports, function (idx, region) {
                    matched = $.grep(region.data, function (pt) { return pt[0] === year; });
                    if (matched.length > 0) {
                        region.value.text(year + ": " + Math.round(matched[0][1]) + "%");
                    } else {
                        region.value.text("");
                    }
                    region.value.css("left", (left + 4) + "px").show();
                });
            }).on("mouseout", function (ev) {
                if (ev.relatedTarget.id !== "marker") {
                    $("#marker").hide();
                    $.each(exports, function (idx, region) {
                        region.value.hide();
                    });
                }
            });

            $("#marker").on("mouseout", function (ev) {
                $("#marker").hide();
                $.each(exports, function (idx, region) {
                    region.value.hide();
                });
            });

        });
    </script>
</body>

</html>

绝尘花遗落

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript可视化——Flot跟踪数据的值

跟踪数据的值用户既可以看到概况的趋势，又可以看到指定的详情。保存所有图表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal...
复制链接

扫一扫