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 - 您显然需要为每个链接提供正确的链接ID。

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

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

使用链接ID是很重要的，因为我认为每个链接的click事件都使用它在闭包中收到的dialog对象。看起来这些对话框似乎没有添加到DOM中，因此您无法通过其ID访问它们，因此触发每个链接的点击事件即可。

我认为棘手的部分是确保您的服务器端代码生成的数据包含需要点击的链接的ID。

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

1 个答案: