好不容易抽出时间将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. iOS 动画绘制线条颜色渐变的折线图

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

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

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

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

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

  4. HTML5填充颜色的fillStyle测试

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

  5. HTML5 Canvas 颜色填充学习

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

  6. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...

  7. delphi dev 汉化

    //把以下文件复制到记事本中,并保存为DevChs.ini放在exe的目录下 //有这个cxLocalizer控件 //主窗体创建的时候 if (fileexists(ExtractFilePath( ...

  8. Xcode 6 AutoLayout Size Classes

    1.基本概念 在iPad和iPhone 5出现之前,iOS设备就唯独一种尺寸. 我们在做屏幕适配时须要考虑的唯独设备方向而已. 而非常多应用并不支持转向,这种话就全然没有屏幕适配的工作了. 随着iPa ...

  9. Remoting接口测试工具

    动手写一个Remoting接口测试工具 基于.NET开发分布式系统,经常用到Remoting技术.在测试驱动开发流行的今天,如果针对分布式系统中的每个Remoting接口的每个方法都要写详细的测试脚本 ...

随机推荐

  1. Android开发之画图的实现

    Android开发之画图的实现    四天前上完安卓的第一节课,真的是一脸懵逼,尽管熊哥说和java是差不多的,然而这个包和那个包之间的那些转换都是些什么鬼呀!!!但是四天的学习和操作下来,我觉得安卓 ...

  2. 每天一个 Linux 命令(15):tail 命令

    tail 命令从指定点开始将文件写到标准输出.使用tail命令的-f选项可以方便的查阅正在改变的日志文件,tail -f filename会把filename里最尾部的内容显示在屏幕上,并且不但刷新, ...

  3. ASP.NET网站入侵第二波(LeaRun.信息化快速开发框架 已被笔者拿下)

    笔者小学文化,语言组织能力差,写的不通的地方请大家将就着看,不喜勿喷. 上篇我讲了如何在上传文件中入侵服务器,這次我们稍微多讲一点. 还是先讲下流程: 1.上传代码页面  我上传的是ashx页面. 2 ...

  4. metasploit连接数据库

    表示一直出问题.不造哪里出错.望有知情人与本人取得联系! test

  5. MongoDB配置文件YAML-based选项全解

    配置文件部分 MongoDB引入一个YAML-based格式的配置文件.2.4版本以前的仍然兼容. 我的mongodb配置文件: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 ...

  6. View (五)自定义View的实现方法

    一些接触Android不久的朋友对自定义View都有一丝畏惧感,总感觉这是一个比较高级的技术,但其实自定义View并不复杂,有时候只需要简单几行代码就可以完成了. 如果说要按类型来划分的话,自定义Vi ...

  7. oracle冷备份后恢复

    本地恢复 在运行中输入cmd. 在cmd界面中输入sqlplus/nolog进入sql*plus. 以dba身份连接数据库conn sys/你设定的密码 as sysdba. 输入:shutdown ...

  8. 几个好用的截取字符串的php函数分享

    分享几个好用的PHP 截取字符串函数(支持gb2312和utf-8). 1.截取GB2312字符用的函数 <?php /** **截取中文字符串 * edit by www.jbxue.com ...

  9. 每次打开VS2010都会报“ devenv.exe -Assert Failure”这个错误

    把.net framework4.5中文包卸载掉,, 如果还不行就把.net framework4.5也卸载掉,,然后到微软官网下载net framework4.5安装包安装,安装完后把中文包卸载掉就 ...

  10. SQL语句优化(分享)

    一.操作符优化 1.IN 操作符 用IN写出来的SQL的优点是比较容易写及清晰易懂,这比较适合现代软件开发的风格.但是用IN的SQL性能总是比较低的,从Oracle执行的步骤来分析用IN的SQL与不用 ...