首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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图表实例

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

jQuery插件 Jqplot图表实例

- Author -

酷小孩

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
js判断两个日期是否相等的方法
Sep 10 Javascript
Jquery实现瀑布流布局（备有详细注释）
Jul 31 Javascript
Javascript打印局部页面实例
Jun 21 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
使用gulp搭建本地服务器并实现模拟ajax
Apr 05 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 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
props(1) 表变量(1) 临时表(1) GTID(1) timestamp(1) 游标(1) ECharts(3) ip连接(1) ref(1) mixin(1)
You might like
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
基于jQuery的弹出消息插件 DivAlert之旅（一）
2010/04/01 Javascript
jquery刷新页面的实现代码（局部及全页面刷新）
2011/07/11 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
Javascript刷新窗口方法小结
2015/10/21 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Nodejs基于LRU算法实现的缓存处理操作示例
2017/03/17 NodeJs
jquery replace方法去空格
2017/05/08 jQuery
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
node.js实现带进度条的多文件上传
2020/03/27 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Python编程中time模块的一些关键用法解析
2016/01/19 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
Python语言编写智力问答小游戏功能
2020/10/13 Python
python 如何设置守护进程
2020/10/29 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
详解使用canvas保存网页为pdf文件支持跨域
2018/11/23 HTML / CSS
雅萌 (YA-MAN) ：日本美容家电领域的龙头企业
2017/05/12 全球购物
自主招生自荐书
2013/11/29 职场文书
婚礼答谢礼品
2015/01/20 职场文书
技术支持岗位职责
2015/02/13 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
电子表的操作介绍说明书
2019/10/28 职场文书
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL