0

I am trying to open a dialog window whenever a pie slice is clicked in JQPlot pie chart. I've tried many different ways to try and get this to work but no luck. I know it needs to be bound to the jqplotDataClick function but I can't get it work that way.

Here is my script for the chart:

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

This is the dialog script. This dialog opens a window that is supposed to coincide with the pie chart slices. The premise is this - I have a pie chart that is made up of data submitted by the user by way of choosing options that appear in a dialog window. Once the pie chart is made up with this data, the user can then click on the pie chart and open a dialog window for each slice to change the options for that portion of the chart. 

<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;
            });
        });
    });

This is part of the HTML for a category and button to open a dialog window - there are many more of these but way too much code to put up here. 

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

1 回答 1

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 很重要，因为我认为每个链接的点击事件都在使用dialog它在关闭时收到的对象。看起来这些对话框并没有添加到 DOM 中，因此您将无法通过它们的 Id 访问它们，因此触发每个链接的单击事件是可行的方法。

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

于 2013-03-20T20:12:04.053 回答