首页
所有分类
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下IE与FF兼容函数收集
Sep 17 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
javascript实现youku的视频代码自适应宽度
May 25 Javascript
canvas学习之API整理笔记（一）
Dec 29 Javascript
详解基于webpack搭建react运行环境
Jun 01 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
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
查询效率(1) delete in(1) Three.js(1) GPU(1) Express(1) kubernetes(1) HBuilder(1) 条形码(1) 分布式追踪(1) group by(1)
You might like
PHP数组内存耗用太多问题的解决方法
2010/04/05 PHP
php中截取中文字符串的代码小结
2011/07/17 PHP
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
JS实现超简单的仿QQ折叠菜单效果
2015/09/21 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
jQuery实现圣诞节礼物传送（花式轮播）
2016/12/25 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
Vue.js学习笔记之修饰符详解
2017/07/25 Javascript
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue基本使用--refs获取组件或元素的实例
2019/11/07 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
基于MATLAB和Python实现MFCC特征参数提取
2019/08/13 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
python绘制趋势图的示例
2020/09/17 Python
AE美国鹰日本官方网站： American Eagle Outfitters
2016/12/10 全球购物
大学校务公开实施方案
2014/03/31 职场文书
协会周年庆活动方案
2014/08/26 职场文书
小学师德师风演讲稿
2014/09/02 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2015年党建工作总结
2015/03/30 职场文书
投资申请报告
2015/05/19 职场文书
单位同意报考证明
2015/06/17 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL