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 图片轮播(5张图片)
Dec 30 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
vue使用watch 观察路由变化,重新获取内容
Mar 08 Javascript
浅谈node的事件机制
Oct 09 Javascript
3种vue组件的书写形式
Nov 29 Javascript
在vue中使用jsx语法的使用方法
Sep 30 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
简单的php新闻发布系统教程
2014/05/09 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
CI框架数据库查询之join用法分析
2016/05/18 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php 时间time与日期date之间的使用详解及区别
2016/11/07 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
一款由jquery实现的整屏切换特效
2014/09/15 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
AngularJS在IE8的不支持的解决方法
2016/05/13 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
微信开发 js实现tabs选项卡效果
2016/10/28 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
python缩进区别分析
2014/02/15 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python实现简单图片物体标注工具
2019/03/18 Python
Python实现自动访问网页的例子
2020/02/21 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
永远跟党走演讲稿
2014/09/12 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
运动会100米广播稿
2015/08/19 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
解决persistence.xml配置文件修改存放路径的问题
2022/02/24 Java/Android