jQPlot图表遇到的一些问题

最新推荐文章于 2021-08-06 11:07:19 发布

原创最新推荐文章于 2021-08-06 11:07:19 发布 · 1.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jqplot

前端同时被 3 个专栏收录

4 篇文章

订阅专栏

jquery

2 篇文章

订阅专栏

jqplot

2 篇文章

订阅专栏

本文分享了在接触前端不久时遇到的问题及解决方法，重点介绍了jQuery.BaseOnJQPlot.js插件的使用，包括如何扩展基本饼图功能、初始化属性以及通过.replot()方法动态更新饼图。此外，文章还提到了调用插件的方法，并讨论了在实际应用中遇到的挑战及解决方案。

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

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还是很强大的，外观也很美，还需要我细细研究使用。