如何使用jqplotDataClick从jqplot饼图打开对话框？

Question

我试图打开一个对话窗口，每当饼图切片在JQPlot饼图中点击。我尝试了很多不同的方法来尝试使这个工作，但没有运气。我知道它需要绑定到jqplotDataClick函数，但我无法以这种方式得到它。

这里是我的图表脚本：

$(document).ready(function(){ 
     plot1 = $.jqplot('chart1', [[[2,1], [4,2], [6,3], [3,4]]], { 
     seriesDefaults: { 
     // Make this a pie chart. 
     renderer: jQuery.jqplot.DonutRenderer, 
     rendererOptions: { 
      // Put data labels on the pie slices. 
      // By default, labels show the percentage of the slice. 
      showDataLabels: true 
     } 
     }, 
     legend: { show:false, location: 'e' }, 
     grid: {background:'transparent', borderColor: 'none', shadow: false} 
    } 
); 

     plot1 = $.jqplot('chart2', [[[2,1,'medical.htm'], [4,2,'link1.html'], [6,3,'link1.html'], [3,4,'link1.html']]], { 

     seriesDefaults: { 
     // Make this a pie chart. 
     renderer: jQuery.jqplot.DonutRenderer, 
     rendererOptions: { 
      // Put data labels on the pie slices. 
      // By default, labels show the percentage of the slice. 
      showDataLabels: true 
     } 
     }, 
     legend: { show:false, location: 'e' }, 
     grid: {background:'transparent', borderColor: 'none', shadow: false} 
    } 
); 

     plot1 = $.jqplot('chart3', [[[2,1], [4,2], [6,3], [3,4]]], { 

     seriesDefaults: { 
     // Make this a pie chart. 
     renderer: jQuery.jqplot.DonutRenderer, 
     rendererOptions: { 
      // Put data labels on the pie slices. 
      // By default, labels show the percentage of the slice. 
      showDataLabels: true 
     } 
     }, 
     legend: { show:false, location: 'e' }, 
     grid: {background:'transparent', borderColor: 'none', shadow: false} 
    } 
); 

     plot1 = $.jqplot('chart4', [[[2,1], [4,2], [6,3], [3,4]]], { 

     seriesDefaults: { 
     // Make this a pie chart. 
     renderer: jQuery.jqplot.DonutRenderer, 
     rendererOptions: { 
      // Put data labels on the pie slices. 
      // By default, labels show the percentage of the slice. 
      showDataLabels: true 
     } 
     }, 
     legend: { show:false, location: 'e' }, 
     grid: {background:'transparent', borderColor: 'none', shadow: false} 
    } 
); 


     $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataHighlight', 
      function (ev, seriesIndex, pointIndex, data) { 
       $('#info1').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data+ ', pageX: '+ev.pageX+', pageY: '+ev.pageY); 
      } 
     );  
     $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataClick', 
      function (ev, seriesIndex, pointIndex, data) { 
       $("#medical1").html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data); 
       //alert(); 
       /* To open in a NEW window use: */ 
       /* window.open(data[2]); */ 
       /* To open in the same window use: */ 
       //window.location.href=neighbor.data[2]; 
      } 
    ); 
     $('#chart1, #chart2, #chart3, #chart4').bind('jqplotDataUnhighlight', 
      function (ev) { 
       $('#info1').html('Nothing'); 
      } 
     ); 
    }); 

这是对话的脚本。该对话框打开一个应该与饼图切片一致的窗口。前提是 - 我有一个饼图，由用户通过选择出现在对话窗口中的选项提交的数据组成。一旦饼图由这些数据组成，用户就可以点击饼图并为每个切片打开一个对话框窗口，以更改图表该部分的选项。

<script type="text/javascript"> 
    $(document).ready(function() { 
     var $loading = $('<img src="img/loading.gif" alt="loading" class="loading">'); 
     $('#prod-dialog td a').each(function() { 
      var $dialog = $('<div></div>') 
       .append($loading.clone()); 
      var $link = $(this).one('click', function() { 
       var $cnt = $(this).attr('href') + " #" + $(this).attr('id') 
       $dialog 
        .load($cnt) 
        .dialog({ 
         title: $link.attr('title'), 
         width: 300, 
         height: 200, 
         buttons: [ 
         { 
          text: "Ok", 
          click: function() { 
           $(this).dialog("close"); 
          } 
         }, 
         { 
         text: "Cancel", 
          click: function() { 
         $(this).dialog("close"); 
          } 
         } 
         ] 
        }); 


       $link.click(function() { 
        $dialog.dialog('open'); 
        return false; 
       }); 
       return false; 
      }); 
     }); 
    }); 

这是HTML的一个类别，按钮打开一个对话框窗口的一部分 - 还有更多的这些，但太多的代码放在这里了。

<table id="prod-dialog"> 
      <tr> 
       <td><div><img src="img/medical-icon.png" /> 
       <p>Medical</p> 
       </div></td> 
       <td><a href="medical.htm" title="Medical 1" id="medical1"><img src="img/dialog-icon_08.png"/></a></td> 
       </tr> 
</table> 

Answer 1

如果情节数据增强这样的（类似于你怎么过的你的问题）：

plot1 = $.jqplot('chart1', [[[2,1,'#medical1'], [4,2,'#medical1'], [6,3,'#medical1'], [3,4,'#medical1']]], { 

然后我们就可以访问该链接标识在jqplotDataClick事件，进而触发其点击事件。请注意，在上面的代码中，我每次都使用相同的链接ID - 您显然需要为每个链接提供正确的链接ID。

然后在jqplotDataClick事件，对话框可以打开这样的：

$(data[2]).trigger('click'); 

，因为我觉得每个链接的点击事件，使用它收到的dialog对象使用链路ID很重要其关闭。它看起来并不像这些对话框被添加到DOM中，所以你将无法通过它们的Id访问它们，因此触发每个链接的点击事件是一种方式。

我想对你最棘手的部分是确保你的服务器端代码正在生产包括需要点击该链接的ID数据。