jQPlot图表遇到的一些问题

2 篇文章 0 订阅
2 篇文章 0 订阅

接触前端不久,遇到问题记录下来备忘

jQuery.BaseOnJQPlot.js

;(function ($) {
    $.fn.myplugin = function (chatname, data, options) {
		
		var opt = {
			title: 'default title',
			seriesDefaults: {
				renderer: jQuery.jqplot.PieRenderer,
				rendererOptions: {
					fill: false, // Turn off filling of slices
					showDataLabels: true,
					dataLabelNudge: +62,
					dataLabelThreshold: 2,
					sliceMargin: 4, // Add a margin to separate the slices.
					lineWidth: 3 // stroke the slices with a little thicker line.
				}
			},
			legend: { // Date series title 
	      		show: true,
	      		location: 'se',
	      		placement: 'inside',
	      		fontSize: '12px',
	      		rowSpacing: '1px'
	    	},
			highlighter: {
  				show: true,
  				formatString:'%s', 
  				useAxesFormatters:false,
        		tooltipContentEditor: function(str, seriesIndex, pointIndex, plot){
                	return '<span style="font-size:15px;">' + str + '</span>';
                }
			}
		};
		var obj = $.extend(opt, options);
		jQuery.jqplot(chatname, data, obj).replot();
		jQuery('#' + chatname).bind('jqplotDataHighlight', 
  		function (ev, seriesIndex, pointIndex, thisdata) {
        	
        	jQuery('#' + chatname + ' .jqplot-title')[0].textContent = thisdata;
   		}
    );
    
    jQuery('#' + chatname).bind('jqplotDataUnhighlight', 
  		function (ev, seriesIndex, pointIndex, thisdata) {
			console.log(jQuery('#' + chatname + ' .jqplot-title'));
        	jQuery('#' + chatname + ' .jqplot-title')[0].textContent = obj.title;
   		}
    );
    }
})(jQuery);

扩展了基本的饼图,然后给予基本属性初始化,如果有传入参数opt,则更新,后面两个bind是移入与移出饼图的时候的动作。

调用:

$(document).ready(function(){
			
			$('#YOURNAME').myplugin('YOURNAME', YOURDATA.YOURCOLUN.pie,{ title:'YOURTITLE' });
		});
这里的YOURDATA是JASON格式,YOURCOLUM是里面的列,例子中间YOURTITLE将会覆盖默认值“default title”

这次遇到最大的问题浪费时间的是

jQuery.jqplot(chatname, data, obj).replot();

原先想法不是这个,是用选择器选择plot再将属性拿去改,但是试了很久都不行,浪费了很多时间,stackflow也有人遇到同样问题,最后只能改成.replot()方法,也是无奈之举。

总体说jquery还是很强大的,外观也很美,还需要我细细研究使用。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值