JQuery图表插件Flot之属性方法
来源:互联网 发布:淘宝买家怎么修改评论 编辑:程序博客网 时间:2024/05/17 03:47
更多详情:http://www.cnblogs.com/jirimutu01/archive/2011/07/13/2105150.html
中文详解:http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html
中文详解:http://www.cnblogs.com/qiudan/archive/2012/06/13/2547719.html
Examples:http://people.iola.dk/olau/flot/examples/
$(function () {var d1 = [[new Date(2016,6,2),90],[new Date(2016,7,2),100],[new Date(2016,8,2),110], [new Date(2016,9,2),90],[new Date(2016,10,2),100],[new Date(2016,12,2),160]];var d2 = [[new Date(2016,6,2),110],[new Date(2016,7,2),120],[new Date(2016,8,2),160], [new Date(2016,9,2),130],[new Date(2016,10,2),130],[new Date(2016,12,2),140]];$.plot("#placeholder", [{ label: "甲", data: d1 }, //label是说明一个数据序列含义的,如果多个序列用于区分序列 { label: "乙", data: d2 } //如果不设置color,那么会自动生成color来进行显示 ], {series: { lines: { show: true }, points: { show: true } xaxis: 1 or 2 //使用哪一条X轴,如果某条数轴没有被任何一条曲线使用,该数轴不会在图表上出现 yaxis: 1 or 2 //使用哪一条Y轴 clickable: boolean //允许监听鼠标点击事件 hoverable: boolean //允许监听鼠标悬停事件 shadowSize: number //曲线阴影 },xaxis: { //设置x轴坐标参数 mode: "time", //数轴是否为时间模式null,time为时间模式 timeformat: "%y/%m/%d" autoscaleMargin: null or number//按百分比为数轴延长一小段来缩放曲线以避免曲线最远的数据点出现在图表边框上 "transform","inverseTransform":可以对原始的数据进行一些特殊的计算以后再进行绘制 %y/%m/%d 小写y是15 大写Y则显示的是2015 表示fullyear },yaxis: { ticks:10, //步长 设置y轴坐标参数程序,尽量会设置最合适的刻度个数,因此,尽管你设置了3个刻度数,却可能得到6个, //如果你不需要自己设置刻度,把"ticks"的值设置为0或一个空数组 min: 80, //数轴最小值 如果没有明确指定将使用数据中的最大最小值 max: 200, //数轴最大值 tickFormatter:function autoscaleMargin:10 //这个属性只能在不设置max/min的时候才可以使用 tickDecimals: 3 //用于设置刻度的小数位数,默认情况下程序会自动判断截取 tickSize //直接跳过估算步骤设置刻度间隔步长,如果你设置该值为2,生成的刻度将会是形如2,4,6 minTickSize //可以设置刻度间隔的最小值, ticks: [0, 1.2, 2.4] //自定义 labelWidth" 和 "labelHeight" 用于设置数轴刻度标签的高宽,这个属性在你需要排列整齐几个图表的时候会派上用场。 },grid: { backgroundColor: { colors: [ "#fff", "#eee" ] }, hoverable: true, clickable: true, borderWidth: {top: 1,right: 1,bottom: 2,left: 2} //背景栅格定制 tickColor //设置刻度线的颜色 labelMargin //设置刻度值标签与网格的距离, borderWidth //设置边框宽度,设为0则取消边框 borderColor //设置边框颜色 ,}}); $("#placeholder").bind("plotclick", function (event, pos, item) { //鼠标点击事件 if (item) { $("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + "."); plot.highlight(item.series, item.datapoint); } }); }); pos有如下属性: pos.pageX,pos.pageY:横纵坐标像素 从左上角(0,0)开始 x轴0-n(-->) y轴0-m(从上到下) pos.x,pos.y,pos.x1,pos.y1:横纵坐标值 item有如下属性 item.datapoint: item.dataIndex 该点数据在对应数列数组里的下标 item.series 曲线对象 item.seriesIndex 在多曲线体系中该曲线的下标,即第几条曲线,编号从0开始 item.pageX,item.pageY 改点屏幕坐标,单位是像素 $("<div id='tooltip'></div>").css({ position: "absolute", display: "none", border: "1px solid #fdd", padding: "2px", "background-color": "#fee", opacity: 0.80 }).appendTo("body"); $("#placeholder").bind("plothover", function (event, pos, item) { //鼠标移动事件 if (item) { var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); $("#tooltip").html(item.series.label + " : " + y) .css({top: item.pageY+5, left: item.pageX+5}) .fadeIn(200); } else { $("#tooltip").hide(); } }); $("#placeholder").bind("plotclick", function (event, pos, item) { //鼠标点击事件 if (item) { plot.highlight(item.series, item.datapoint); } });
阅读全文
1 0
- JQuery图表插件Flot之属性方法
- JQuery图表插件Flot之属性方法
- JQuery图表插件之Flot
- jquery flot图表插件
- JQuery图表插件Flot之效果源码
- flot - jQuery 图表插件(jquery.flot)使用
- flot - jQuery 图表插件(jquery.flot)使用
- jquery.flot图表插件使用
- JQuery图表插件Flot之时间轴步长
- JQuery图表插件jquery.flot.js
- jQuery 的图表绘制插件 Flot
- 【部分原创】jquery图表插件flot笔记
- ASP.NET----jQuery插件flot绘画图表
- jQuery图表插件Flot中文文档
- jQuery图表插件 Flot(一)
- jQuery图表插件Flot中文文档
- jQuery图表插件Flot中文文档
- 开发者必知的20个jQuery插件——之一jQuery+Flot可视化图表
- java.lang.reflect.UndeclaredThrowableException原因和解决方法
- 42. Trapping Rain Water
- 【论文阅读】Convolutional Sequence to Sequence Learning (未完待续)
- App提交苹果审核被拒原因总结
- 微信公众号内使用模板功能发送信息
- JQuery图表插件Flot之属性方法
- 安卓开发之Kotlin
- Java并发之synchronized实现原理
- SS速度慢——最大的可能是被运营商QoS了
- AFNetWorking(3.0)源码分析(一)——基本框架
- 基于注解@Bean的配置使用方式
- 详解Java Project项目打包成jar,并生成exe文件
- querySelector和querySelectorAll区别
- [iOS 原生代码实现扫描二维码/条形码] AVCaptureDevice