jqplot柱状图钻取的实现

最新推荐文章于 2021-03-20 06:34:30 发布

wufanwind

最新推荐文章于 2021-03-20 06:34:30 发布

阅读量1.1k

点赞数

文章标签： jqplot 钻取

本文链接：https://blog.csdn.net/wufanwind/article/details/24694567

版权

本人是一名java程序猿，以前有问题都是搜索别人的博客来解决，如果没有相关的答案，博主就迷茫了，去官网看API都是英文，也非常头疼。

适逢公司项目要做报表，最近也看了些报表工具，要么就是商业收费的，要么就是太丑，文档太少的。最后选定了jqplot来研究，免费的。（百度的echars貌似也不错）

jqplot官网里的examples，有折线图的数据源切换，非常方便，如下：

//数据源

var dataSets = {
aa: [ [ 3, 1 ], [ 4, 2 ], [ 5, 3 ] ],
bb: [ [ 2, 2 ], [ 3, 3 ], [ 4, 4 ], [ 5, 5 ], [ 6, 6 ] ]
};

//定义图

$(document).ready(function() {

//不要加var，否则为局部变量
plot1 = $.jqplot("div1", [ dataSets.aa ], {.....相关设置});

});

//重设数据源
plot1.series[0].data = dataSets.aa;
//重画
plot1.replot({resetAxes :true});

但是博主需要的是柱状图的钻取，经理要求直接在一个图里做不要重新画图，而且网上有人说重画有内存溢出问题，柱状图和折线图的数据源重设不一样，找了半天也没有相关的答案，于是慢慢摸索尝试，最后终于成功了。

现在分享实现方法和页面。

(说明：

页面内的js引用可以直接引用官网的js，类似路径为http://www.jqplot.com/src/plugins/jqplot.canvasTextRenderer.min.js，

chart1这个div就是画图区域，必须设置大小

)

<body>
......
<!--[if lte  IE 9]>
<script language="javascript" type="text/javascript" src="js/excanvas.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.custom.css" />
<script language="javascript" type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.effect.js"></script>
<script language="javascript" type="text/javascript" src="js/ui/jquery.ui.effect-scale.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.css" />
<script type="text/javascript" src="js/jquery.jqplot.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.canvasOverlay.min.js"></script>
</head>
<body>
<span id="info">Nothing yet.</span>
<div id="chart1" style="position:absolute;height:400px;width:300px; z-index: 99; "></div>
<script type="text/javascript">
var dataSets = {
hubei :[['wuhan',4],['huangshi',6],['xiaogan',5]],
wuhan : [['wf',1],['ee',2],['rr',11],['yy',4]],
huangshi : [['bb',1],['nn',2],['zz',11],['xx',4],['cc',5]],
xiaogan : [['aa',6],['ss',3],['dd',1],['ff',2],['gg',3],['hh',3]]
};
$.jqplot.config.enablePlugins = true;
$(document).ready(function() {
plot1 = $.jqplot("chart1", [ dataSets['hubei'] ], {
//画图是否要动画
animate: true,
    animateReplot: true,
//柱状图渲染
    seriesDefaults:{              
        renderer:$.jqplot.BarRenderer, 
        rendererOptions : {
barWidth : 21
} 
},
       axesDefaults: { },
axes : {
xaxis : {
renderer: $.jqplot.CategoryAxisRenderer
}
,
yaxis : {
pad : 1.2
} 
},


});
//绑定柱状的点击事件为zq，传入的参数为数据源名（如wuhan）
$('#chart1').bind(
'jqplotDataClick',
function(ev, seriesIndex, pointIndex, data) {
$('#info').html(
'series: ' + seriesIndex + ', point: '
+ pointIndex + ', data: ' + data+',tick:'+plot1.axes.xaxis.ticks[pointIndex]);
zq(plot1.axes.xaxis.ticks[pointIndex]);

});
});


function zq(tick) {
var d=dataSets[tick];
//如果没有下一层了，则初始化
if(d==undefined){
zq('hubei');
return;
}
//！！！重设数据和ticks为空数组，然后填入数据，和折线图的方法不一样
plot1.axes.xaxis.ticks=new Array();
plot1.series[0].data= new Array();
 for ( var j = 0; j <d.length; j++) {   
           try {   
            plot1.axes.xaxis.ticks.push(d[j][0]); 
//柱状图数组索引从1开始
            var temp=[j+1,d[j][1]];
            plot1.series[0].data.push(temp);  
           } catch (e) { 
            alert(e); 
           }   
   }
//XY轴重画，以便适应新数据的长短
plot1.resetAxesScale();
plot1.replot({resetAxes :true}); 

}
</script>
</body>

截图如下：

1：初始图