好不容易抽出时间将Jqplot做下最后的总结,下面通过四个例子来学习Jqplot的一些常见技巧:
示例1. 设置线条颜色(包括背景色及线条颜色的批量赋值)

<!DOCTYPE html>
<html>
<head>
    <title>Jqplot Testing</title>
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div id="Chart1" style="height:400px; width:600px;"></div>
    <script type="text/javascript" class="code">
    $(document).ready(function(){
        var d1 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2],[7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
        var d2 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1],[7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];

        var plot1 = $.jqplot('Chart1', [d1, d2], {
            grid: {
                drawBorder: false,
                shadow: false,
                //The background color of the whole chart.
                background: '#FFFFFF'
            },
            highlighter: { show: true },
            seriesDefaults: {
                shadowAlpha: 0.1,
                shadowDepth: 2,
                fillToZero: true
            },
            series: [
                {
                    color: 'red',
                    showMarker: true,
                    showLine: true,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                },
                {
                    color: 'yellow',
                    showMarker: true,
                    showLine: true,
                    rendererOptions: {
                        smooth: true,
                    },
                    markerOptions: {
                        style: 'filledSquare',
                        size: 8
                    },
                }
            ],
            axes: {
                xaxis: {
                    pad: 1.0,
                    tickOptions: {
                      showGridline: false
                    }
                },
                yaxis: {
                    pad: 1.05
                }
            }
        });
    });
    </script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>

效果演示:

示例2. 线条常见的属性控制及特点,本例中需要注意一下两点:

A. 本例定义了两种颜色,但共有三条线,所以颜色会轮流显示;
       *有时鼠标放在节点上没有值显示或线条颜色显示黑色,有可能是加的颜色Chart无法识别;
 B. series: [{ show: true }, { showLine: true, showLabel: false }]
      此处需要注意的是如果需要精确控制每条线的显示,有几组数据,就要写几组属性控制列表.

<!DOCTYPE html>
<html>
<head>
    <title>Jqplot Testing</title>
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div id="Chart2" style="height:400px; width:600px;"></div>
    <script type="text/javascript" class="code">
    $(document).ready(function(){
        var d1 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2],[7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
        var d2 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1],[7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
        var d3 = [[0, 2.3], [2, 5], [2, -5], [3, -4.2], [4, 4], [5, -2], [5.5,4.5],[3, 7.1], [6, -2.4], [8, 6], [8, -1], [10, 0.1], [12, 8], [14, 10], [13, -7]];
        var colorListForChart2 = ['orange','blue'];
        var plot2 = $.jqplot('Chart2', [d1,d2,d3], {
            grid: {
                drawBorder: false,
                shadow: false,
                //The background color of the whole chart.
                background: '#FFFFFF'
            },
            highlighter: { show: true },
            seriesDefaults: {
                shadowAlpha: 0.1,
                shadowDepth: 2,
                fillToZero: true
            },
            //总括:和chart1相比,chart2中对chart1的series进行了合并;
            //A. The usage of seriesColors;此处定义了两种颜色,但共有三条线,所以颜色会轮流显示;
            //PS.有时鼠标放在节点上没有值显示或线条颜色显示黑色,有可能是加的颜色Chart无法识别;
            seriesColors: colorListForChart2,
            //B. series: [{ show: true }, { showLine: true, showLabel: false }]
            //此处需要注意的是如果需要精确控制每条线,有几组数据,就要写几组属性控制列表.
            //此处共有三组数据,如果要精确控制每条线的显示情况,要写三组属性控制,如:[{ show: true }, { showLine: true, showLabel: false },{ showLine: true, showLabel: false }]
            series: [
                {
                    showMarker: true,
                    showLine: true,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                }
            ],
            axes: {
                xaxis: {
                    pad: 1.0,
                    tickOptions: {
                        showGridline: false
                    }
                },
                yaxis: {
                    pad: 1.05
                }
            }
        });
    });
    </script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>

效果演示:

示例3. 自定义线条节点的颜色:

<!DOCTYPE html>
<html>
<head>
    <title>Jqplot Testing</title>
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
 <div id="Chart1" style="height:400px; width:600px;"></div>
 <div id="Chart2" style="height:400px; width:600px;"></div>
 <div id="Chart3" style="height:400px; width:600px;"></div>
    <script type="text/javascript" class="code">
    $(document).ready(function(){
        var d11 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2], [7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
        var d12 = [[0, -10.3], [1, 7.0], [2, 15.7], [3, 0.5], [4, -10.4], [5, 1.1], [6, 13.2], [7, 1.8], [8, -4.5], [9, -1.8], [10, 2.0], [11, 3.0], [12, -3.5], [13, -7.4], [14, -11.3]];
        var d21 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1], [7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
        var d22 = [[0, 1.3], [1, 12.8], [2, -8.2], [3, -5.2], [4, 16.4], [5, -5.3], [6, 8.1], [7, 15.1], [8, -4.4], [9, 7.8], [10, -1.4], [11, 0.2], [12, 1.3], [13, 11.7], [14, -9.7]];
        var colorListForChart3 = ['yellow','red', 'blue', 'red'];
        var plot3 = $.jqplot('Chart3', [d11, d12, d21,d22], {
            grid: {
                drawBorder: false,
                shadow: false,
                //The background color of the whole chart.
                background: '#FFFFFF'
            },
            highlighter: { show: true },
            seriesDefaults: {
                shadowAlpha: 0.1,
                shadowDepth: 2,
                fillToZero: true
            },
            seriesColors: colorListForChart3,
            series: [
                {
                    showMarker: true,
                    showLine: true,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                },
                {
                    showMarker: true,
                    showLine: false,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                },
                {
                    showMarker: true,
                    showLine: true,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                },
                {
                    showMarker: true,
                    showLine: false,
                    markerOptions: {
                        style: 'filledCircle',
                        size: 8
                    },
                    rendererOptions: {
                        smooth: true
                    }
                }
            ],
            axes: {
                xaxis: {
                    pad: 1.0,
                    tickOptions: {
                        showGridline: false
                    }
                },
                yaxis: {
                    pad: 1.05
                }
            }
        });
    });
    </script>
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
    <script class="include" type="text/javascript" src="../plugins/jqplot.highlighter.min.js"></script>
</body>
</html>

效果演示:

示例4. Jqplot的实时显示效果:

关于Jqplot的实时显示效果,主要是通过setTimeout(JqplotEvent, 1000)来进行调用的,其他逻辑及显示与以上均保持一致。

下一篇  Jqplot使用总结之二(双Y轴)

Jqplot 使用总结之一(线条及节点颜色)的更多相关文章

  1. jqPlot图表插件学习之数据节点高亮和光标提示

    一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载 ...

  2. 炎黄流程中改流程节点颜色的js

  3. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  4. NS2 nam中节点及数据流颜色设置

    NS2 节点颜色设置在http://hi.baidu.com/jrwen0/item/d105c642f4c3ce36fb89601b说明的比較具体,大家能够參见. 我这里想说的是数据流颜色的设置,相 ...

  5. Tree树节点选中及取消和指定节点的隐藏

    指定节点变色 指定节点隐藏 单击节点 未选中则选中该节点 已选中则取消该节点 前台: 1.HTML <ul id="listDept" name="listDept ...

  6. HTML5填充颜色的fillStyle测试

    效果:http://hovertree.com/texiao/html5/canvas/1/ 代码: <html> <head> <meta http-equiv=&qu ...

  7. HTML5 Canvas 颜色填充学习

    ---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...

  8. 大名鼎鼎的红黑树,你get了么?2-3树 绝对平衡 右旋转 左旋转 颜色反转

    前言 11.1新的一月加油!这个购物狂欢的季节,一看,已囊中羞涩!赶紧来恶补一下红黑树和2-3树吧!红黑树真的算是大名鼎鼎了吧?即使你不了解它,但一定听过吧?下面跟随我来揭开神秘的面纱吧! 一.2-3 ...

  9. MindFusion 中节点关键路径的遍历

    工作中总能遇到 一些 奇葩的需求,提出这些奇葩需求的人,多半也是奇葩的人,要么不懂相关的计算机软件知识,要么就是瞎扯蛋,异想天开,然而这些奇葩的需求,我也总能碰到.言规正传,在一次项目中,使用了 Mi ...

随机推荐

  1. webgl 循环传参画10个点

    function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...

  2. python模块之logging

    在现实生活中,记录日志非常重要.银行转账时会有转账记录:飞机飞行过程中,会有黑盒子(飞行数据记录器)记录飞行过程中的一切.如果有出现什么问题,人们可以通过日志数据来搞清楚到底发生了什么.对于系统开发. ...

  3. UVa 11137 (完全背包方案数) Ingenuous Cubrency

    题意:用13.23……k3这些数加起来组成n,输出总方案数 d(i, j)表示前i个数构成j的方案数则有 d(i, j) = d(i-1, j) + d(i, j - i3) 可以像01背包那样用滚动 ...

  4. 第1章 开发环境安装和配置(二)安装JDK、SDK、NDK

    原文 第1章 开发环境安装和配置(二)安装JDK.SDK.NDK 无论是用C#和VS2015开发Androd App还是用Java和Eclipse开发Androd App,都需要先安装JDK和Andr ...

  5. PHP Predefined Interfaces 预定义接口

    SPL提供了6个迭代器接口: Traversable 遍历接口(检测一个类是否可以使用 foreach 进行遍历的接口) Iterator 迭代器接口(可在内部迭代自己的外部迭代器或类的接口) Ite ...

  6. Android 在一个程序中启动另一个程序

    Android 开发有时需要在一个应用中启动另一个应用,比如Launcher加载所有的已安装的程序的列表,当点击图标时可以启动另一个应用.一般我们知道了另一个应用的包名和MainActivity的名字 ...

  7. 被拒--悲剧之ORA-01017: invalid username/password; logon denied 错误

    本地没有安装oracle.安装了oracleclient和PL/SQL Developer.来实现对oracle数据库的可视化操作. 在使用在登录PL/SQL无法登录.提示错误:ORA-01017: ...

  8. github的SSH配置如下

    Git是分布式的代码管理工具,远程的代码管理是基于SSH的,所以要使用远程的Git则需要SSH的配置. github的SSH配置如下: 一 . 设置Git的user name和email: $ git ...

  9. 记一次解析XML转对象的笔记

    项目中调用第三方API,返回格式是XML字符串,需要将XML反序列化为对象,格式如下: <?xml version="1.0"?> <Response xmlns ...

  10. Yii Restful api认证