jQuery插件 Jqplot图表实例


Posted in Javascript onJune 18, 2016
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="js/jqplot/jquery.jqplot.min.css" rel="stylesheet" />
  <script src="js/jqplot/jquery.min.js"></script>
  <script src="js/jqplot/jquery.jqplot.min.js"></script>
  <script src="js/jqplot/excanvas.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.barRenderer.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.pointLabels.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>

  <script src="js/jqplot/plugins/jqplot.cursor.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.highlighter.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>

  <script src="js/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
  <script src="js/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
  <script>
    $(function () {

      //--------------官网---------------------------

      // var plot1 = $.jqplot('chart1', [[3, 7, 9, 1, 4, 6, 8, 2, 5]]);


      //----------------实例 -------------------------

      // var ticks = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022', '20111019', '20111017', '20111026', '20111005', '20110912', '20110903', '20110911', '20110923', '20111016', '20111001', '20110904', '20110924', '20110918', '20111021', '20111011', '20111030', '20110908', '20110913', '20110928', '20111025', '20110921', '20111002', '20111028', '20110906', '20110926', '20111018', '20110905', '20111007', '20111013', '20110907', '20110916', '20110927', '20111027', '20110902', '20110922', '20111006', '20111010', '20110910', '20111023', '20110919', '20110930', '20110917', '20110920', '20111009', '20111015', '20110909', '20110925', '20110929', '20111014', '22'];

      var tick2 = ['20110915', '20111024', '20111003', '20111008', '20111020', '20111012', '20110914', '20111029', '20111004', '20111022'];

      //var b1 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99, 56.27, 59.23, 68.53, 60.45, 78.47, 62.24, 91.62, 39.38, 52.76, 122.34, 95.84, 81.85, 72.62, 69.30, 49.76, 78.07, 36.22, 44.18, 88.87, 72.65, 49.90, 140.91, 75.52, 64.64, 63.31, 73.33, 65.53, 69.31, 56.26, 51.32, 50.53, 81.99, 74.16, 31.04, 41.95, 64.09, 65.85, 73.88, 91.34, 67.09, 93.91, 65.96, 52.86, 41.03, 67.93, 72.25, 74.18, 103.10, 51.57, 55.74];  //子统计1数据 

      var b2 = [46.84, 59.87, 103.42, 62.80, 67.72, 32.59, 54.91, 109.06, 79.68, 83.99];


      var plot2 = $.jqplot('chart2', [b2], {
        title: '2011-9到2011-10月现金收益(元)',
        legend: { show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南) 
        series: [
          {
            label: '现金收益',
            // lineWidth: 8, //线条粗细 
            markerOptions: { size: 9, style: "circle" } // 节点配置
          }
        ], //提示工具栏 
        //captureRightClick: true,//禁用右键
        seriesDefaults: {
          pointLabels: { show: true, ypadding: -1 } //数据点标签
          //renderer: $.jqplot.BarRenderer, //使用柱状图表示 
          //柱状体组之间间隔 
          //rendererOptions: {barMargin: 25}
        },
        axes: {
          xaxis: {
            label: "日期", //x轴显示标题
            pad: 5,
            renderer: $.jqplot.CategoryAxisRenderer, //x轴绘制方式
            tickInterval: '1day',
            ticks: tick2,
            tickOptions: {

              fontSize: '10pt'
            },
            mark: 'cross'
          },
          yaxis: {
            label: "现金", // y轴显示标题
            min: 0,
            //tickInterval: 10,   //网格线间隔大小
            tickOptions: { formatString: '%.2f', fontSize: '10pt' }
          }
        }
      });

      //-----------------测试 折线图------------------------

      var cosPoints = [
      ['20140701', 23],
      ['20140702', 12.6],
       ['20140703', 45.2],
      ['20140704', 12.6],
       ['20140705', 10],
      ['20140706', 8.6],
       ['20140707', 23.2],
      ['20140708', 12.6],
      ];

      var plot3 = $.jqplot('chart1', [cosPoints], {
        title: '消费水平', //标题
        legend: { show: true, location: 'ne' }, //提示工具栏--show:是否显示,location: 显示位置 (e:东,w:西,s:南,n:北,nw:西北,ne:东北,sw:西南,se:东南) 
        //series: [{showMarker:true}],
        axesDefaults: { //轴的刻度值,字体大小,字体类型,字体角度
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          // labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
          tickOptions: {
            //fontSize: '10pt',
            angle: 20
          }
        },
        seriesDefaults: {
          label: '消费值', //分类名称
          color: 'red', //分类在图标中表示(折现,柱状图等)的颜色
          //showLine: true, //是否显示图表中的折线(折线图中的折线) 
          //markerOptions: {
          //  show:true
          //}
          showMarker: true, //是否显示节点
          pointLabels: {
            show: true,//数据点标签
            // edgeTolerance:1
          }
        },
        axes: {
          xaxis: {
            label: '日期',
            renderer: $.jqplot.CategoryAxisRenderer,
            // readerer:$.jqplot.DateAxisRenderer,

            // tickInterval: 'lday',
            labelOptions: {
              //formatString:'%Y-%m-%d',
              fontSize: '12pt'
            }
          },
          yaxis: {
            label: '现金',
            //autoscale: true,
            min: 0,
            tickOptions: { formatString: '%.2f', fontSize: '10pt' }
          }
        }
      });

      //--------------------测试 提示文字的倾斜角度---------------------


      var line3 = [['20140701', 7], ['20140702', 9], ['20140703', 15],
 ['20140704', 12], ['20140705', 3],
 ['20140706', 6], ['20140707', 18]];

      var plot3 = $.jqplot('chart3', [line3], {
        title: 'Concern vs. Occurrance',
        // series: [{ renderer: $.jqplot.BarRenderer }],
        axesDefaults: {
          tickRenderer: $.jqplot.CanvasAxisTickRenderer,
          tickOptions: {
            angle: 10, //倾斜角度 
            fontSize: '10pt'
          }
        },
        axes: {
          xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer
          }
        }
      });

      //--------------------测试 节点高亮显示---------------------

      var line4 = [['20140701', 7], ['20140702', 9], ['20140703', 15],
['20140704', 12], ['20140705', 3],
['20140706', 6], ['20140707', 18]];

      var plot4 = $.jqplot('chart4', [line4], {
        seriesDefaults: {
          label: '消费值', //分类名称
          pointLabels: {
            show: true,//数据点标签
            // edgeTolerance:1
          }
        },
        axes: {
          xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            tickOptions: {
              //formatString: '%b %#d'
            }
          },
          yaxis: {
            tickOptions: {
              // formatString: '$%.2f'
            }
          }
        },
        highlighter: {
          show: true,
          sizeAdjust: 5, // 当鼠标移动到数据点上时,数据点扩大的增量
          fadeTooltip: true,// 设置提示信息栏出现和消失的方式(是否淡入淡出) 
          //lineWidthAdjust: 2.5,  //当鼠标移动到放大的数据点上时,设置增大的数据点的宽度
          tooltipOffset: 2,    // 提示信息栏据被高亮显示的数据点的偏移位置,以像素计
          //tooltipLocation: 'nw' // 提示信息显示位置(英文方向的首写字母): n, ne, e, se, s, sw, w, nw. 
        },
        cursor: {
          show: false,
          showTooltip: true,  // 是否显示提示信息栏 
          followMouse: true,   //光标的提示信息栏是否随光标(鼠标)一起移动 
          //tooltipLocation: 'se', // 光标提示信息栏的位置设置。如果followMouse=true,那么该位置为 
          //提示信息栏相对于光标的位置。否则,为光标提示信息栏在图标中的位置 
          // 该属性可选值: n, ne, e, se, etc. 
          tooltipOffset: 6,   //提示信息栏距鼠标(followMouse=true)或坐标轴(followMouse=false)的位置 
        }
      });

      //--------------------测试 Ajax数据调用(未深入测试)---------------------

      var ajaxDataRenderer=function (url,plot,options) {
        var ret=null;
        $.ajax({
          url:url,
          async:false,//注意 一定要为false
          dataType:"json",
          success:function(data){
            ret=data;
          }
        });
        return ret;
      };
      //数据请求路径
      var jsonurl = "DataHandler.ashx"; //返回数据: [[2,4,6,8,9,6]]

      var plot5 = $.jqplot('chart5', jsonurl, {

        dataRenderer: ajaxDataRenderer, //数据回调函数
        dataRendererOptions: {
          unusedOptionalUrl:jsonurl
        }
      });


    })
  </script>
</head>
<body>

  <div id="chart2" style="width: 1000px; height: 400px;"></div>
  <hr />
  <div id="chart1" style="height: 300px; width: 500px;"></div>

  <br />
  <div id="chart3" style="height: 300px; width: 500px;"></div>
  <br />
  <div id="chart4" style="height: 300px; width: 500px;"></div>
  <br />
  <div id="chart5" style="height: 300px; width: 500px;"></div>
</body>

</html>

效果如下:

jQuery插件 Jqplot图表实例

以上就是本文的全部内容,希望能帮到大家,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
Jquery 弹出层插件实现代码
Oct 24 Javascript
学习面向对象之面向对象的术语
Nov 30 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
关于编写性能高效的javascript事件的技术
Nov 28 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
跟我学习javascript的循环
Nov 18 Javascript
BootStrap selectpicker
Jun 20 Javascript
详解vue项目的构建,打包,发布全过程
Nov 23 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 #Javascript
jQuery获取radio选中项的值实例
Jun 18 #Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 #Javascript
jQuery解决$符号命名冲突
Jun 18 #Javascript
prototype.js常用函数详解
Jun 18 #Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 #Javascript
Javascript中prototype的使用详解
Jun 18 #Javascript
You might like
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
html中select语句读取mysql表中内容
2006/10/09 PHP
destoon复制新模块的方法
2014/06/21 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
详解Laravel5.6 Passport实现Api接口认证
2018/07/27 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
解决 FireFox 下[使用event很麻烦] 的问题.
2006/08/22 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
vue项目打包之后背景样式丢失的解决方案
2019/01/17 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
layui实现数据分页功能
2019/07/27 Javascript
python求列表交集的方法汇总
2014/11/10 Python
基于Python的XSS测试工具XSStrike使用方法
2017/07/29 Python
Python3对称加密算法AES、DES3实例详解
2018/12/06 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
python开发一款翻译工具
2020/10/10 Python
python中time tzset()函数实例用法
2021/02/18 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
澳大利亚第一的设计师礼服租赁网站:GlamCorner
2017/08/13 全球购物
项目经理聘任书
2014/03/29 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
2015年化验室工作总结
2015/04/23 职场文书
2015人事行政工作总结范文
2015/05/21 职场文书
妈妈再爱我一次观后感
2015/06/08 职场文书
安全第一课观后感
2015/06/18 职场文书
导游词之任弼时故居
2020/01/07 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python