0

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

1 に答える 1

1

プロットデータが次のように拡張されている場合（質問でのデータと同様）：

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

次に、イベント内のリンクIDにアクセスし、jqplotDataClickクリックイベントをトリガーできます。上記のコードでは、毎回同じリンクIDを使用していることに注意してください。明らかに、それぞれに正しいリンクIDを指定する必要があります。

次に、jqplotDataClickイベントで、次のようにダイアログを開くことができます。

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

dialog各リンクのクリックイベントは、クロージャーで受け取ったオブジェクトを使用していると思うので、リンクIDを使用することが重要です。これらのダイアログがDOMに追加されているようには見えないため、IDでアクセスすることはできません。したがって、各リンクのクリックイベントをトリガーするのが最善の方法です。

サーバー側のコードが、クリックする必要のあるリンクのIDを含むデータを生成していることを確認するのが難しい部分だと思います。

于 2013-03-20T20:12:04.053 に答える