接触前端不久,遇到问题记录下来备忘
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还是很强大的,外观也很美,还需要我细细研究使用。