jqplot如何使链接到另一个页面的条形图可点击答案

【问题标题】：jqplot how to make bar graph clickable that links to another pagejqplot如何使链接到另一个页面的条形图可点击
【发布时间】：2013-10-21 06:37:54
【问题描述】：

我尝试使用 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' }
                 }
             }
         });
     });

我应该如何创建指向栏的链接，例如 localhost/webCharts/branch.aspx?branchId=08270K08001

也试过这个How to catch the click event from the axis ticks 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]);
                });
            }
        });

但是当用户点击时什么都没有发生。我在这里错过了什么吗？提前致谢

【问题讨论】：

标签： javascript jquery jqplot

【解决方案1】：

我想出了一种方法，通过使用 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。非常感谢大家

【讨论】：

【解决方案2】：

我不确定您是否仍在寻找解决方案，但我在研究同一问题时发现了您的问题。我只是想出了如何让它工作。根据您的代码，您应该添加一个类似这样的函数：

$('#Chart1').bind('jqplotDataClick', function (ev, seriesIndex, pointIndex, data) {
    window.parent.location.href = 'YOURURL.aspx?id=' + arrBranchId[pointIndex];
});

希望这会对您或其他人有所帮助。

【讨论】：

是的，谢谢你的想法。好像和我上面写的很相似:-D.
哈，我想我没有读到足够远的页面！那会节省我一些时间！ :)

【解决方案3】：

删除每个循环并使用 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) 你可以使用数据值做任何其他事情，即将用户重定向到包含该值的 URL 作为参数传递

演示 http://jsfiddle.net/fordlover49/JWhmQ/

【讨论】：

谢谢，但是如何将标签作为 URL 参数传递？我有标签（系列）值，并希望将其传递到其他页面。示例 localhost/webCharts/branch.aspx?labelValue=08270K08001。有可能吗？
当然可以，你看过我在 jsfiddle 上的例子了吗？只需用您的链接替换警报（数据）并将数据用作参数值
谢谢 - 它刚刚做了（帮助）:)

【解决方案4】：

可以使用这段代码sn-p来获取点击事件！

// 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

【讨论】：

@mhn 为什么？它没有帮助你？请建议您还想正确实施它！
非常感谢@Rahul Gupta，但我可以获取标签（系列）价值吗？我应该使用什么参数？再次感谢。
我已经更新了我的 jsfiddle，现在单击图表您将能够获取值，请参阅此链接：jsfiddle.net/phpdeveloperrahul/tQvCX/4

【解决方案5】：

我找到了一个更简单的方法.. 像这样保持简单：

   $('#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';
            }
  );

【讨论】：