[英]jqplot how to make bar graph clickable that links to another page
我尝试使用jqplot创建条形图,该条形图可以单击,然后将用户连同标签值作为url参数一起重定向到另一个页面,但是没有运气可以建立链接。 这是我所做的。
$(document).ready(function() {
$.jqplot.config.enablePlugins = true;
var ticks = [ 'SCAN', 'SGON', 'TERM', 'TRAN'];
var arrBranchId = ['08270K08001', '08298K08003', '12026K12003','14123K14003'];
var plot1 = $.jqplot('chart1',[[0,0,0,1],[2,4,2,5],[0,0,0,1],[0,5,0,1]], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: { fillToZero: true },
pointLabels: { show: true }
},
series: [{label:'08270K08001'},{label:'08298K08003'},{label:'12026K12003'},{label:'14123K14003'}],
legend: {
show: true,
placement: 'ne'
},
highlighter: {
show: false,
},
cursor: {
show: true
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
pad: 1.05,
tickOptions: { formatString: '%d' }
}
}
});
});
还尝试过此方法如何从轴刻度jqplot,highcharts,flot捕获单击事件 ,将函数更改为
$('.jqplot-xaxis-tick').each(function(){
var label = $(this),
value = label.text();
if(categoryLinks[value]) {
label.click(function(){
alert('could link to another page: ' + categoryLinks[value]);
});
}
});
但是当用户点击时什么也没有发生。 我在这里想念什么吗? 提前致谢
我想出了一种方法,使该栏可单击并通过使用window.location链接到另一个页面,如下所示
$('#chart1').bind('jqplotDataClick',function(ev, seriesIndex, pointIndex, data){
window.location = 'branchDetails.aspx?appId='+ticks[**pointIndex**]+"&branchId="+arrBranchId[**seriesIndex**];
});
注意:数组ticks []和arrBranchId []已经在$(document).ready(function(){.....}中定义了,所以我刚刚通过pointIndex和seriesIndex传递了数组。非常感谢大家
我不确定您是否仍在寻找解决方案,但在研究相同问题时发现了您的问题。 我只是想出了如何使其工作。 根据您的代码,您应该添加类似以下的功能:
$('#Chart1').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
window.parent.location.href = 'YOURURL.aspx?id=' + arrBranchId[pointIndex];
});
希望这对您或其他人有帮助。
删除每个循环,并使用jqplot绑定方法jqplotDataClick:
// replace chart1 with your div ID
$('#chart1').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
// data contains the data point value, play with it
// NOTE it may contain an array and not a string
alert(data);
});
在上面的示例中,我使用alert(data),您可以使用data值执行其他任何操作,即将用户重定向到包含以参数值传递的URL
您可以使用此代码段获取click事件!
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {alert('clicked')
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
看看这个演示JSFIDDLE
我找到了一种更简单的方法。
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
/* To open in a NEW window use: */
/* window.open(data[2]); */
/* To open in the same window use: */
window.location.href='ErrorView3.php';
}
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.