2

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

ユーザーがクリックしても何も起こりません。ここで何か不足していますか？前もって感謝します

4

5 に答える 5

4

次のように 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で配列を渡しました。

于 2013-10-21T16:57:26.087 に答える
3

あなたがまだ解決策を探しているかどうかはわかりませんが、同じ問題を調査しているときにあなたの質問を見つけました. 私はそれを機能させる方法を考え出しました。コードに基づいて、次のような関数を追加する必要があります。

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

うまくいけば、これはあなたや他の誰かを助けるでしょう.

于 2014-01-06T22:58:29.140 に答える
1

各ループを削除し、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/

于 2013-10-21T06:56:09.250 に答える
0

もっと簡単な方法を見つけました..次のように単純にしてください： 

   $('#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';
            }
  );
于 2015-02-04T19:13:01.233 に答える