图表(SQL Chart)点击事件

应用场景

  • 点击图表上的值弹出明细窗口
  • 双击图表上的值打开明细新窗口

样例代码

  • 一般替换内容:
    • URL:form_user_view
    • URL参数:id

    • 正序(XY图)
      <script>
      var popupActionDialog = null;
      function openpopup(url) {
          if (popupActionDialog == null) {
               popupActionDialog = new PopupDialog(url);
          } else {
               popupActionDialog.src = url;
          }
          popupActionDialog.init();
      }
      $(function(){
          var timeOut;
          $('#jq_plot_chart').bind('jqplotDataClick',
              function (event, seriesIndex, pointIndex, data) {
                      clearTimeout(timeOut);
                      timeOut = setTimeout(function() {
                          // get table rows length
                         // var length = $("table tr[class='jqplot-table-legend']").length;
                         // var y_index = (length - 1) - seriesIndex;
                           
                          var xaxis = $(".jqplot-xaxis-tick:eq("+pointIndex+")");
                          var series = $(".jqplot-table-legend-label:eq("+seriesIndex+")");
       
                          var xaxis_txt = xaxis.text();// 横坐标值
                          var series_txt = series.text();// 类型值
       
                          var url = "chart_xy?xaxis=" + xaxis_txt + "&series=" + series_txt;// 跳转的url
                          openpopup(url); // 弹出窗打开
                      }, 300);         
              }
          ).bind('jqplotDblClick',
              function (event, coordinate, points, data) {
                  clearTimeout(timeOut);
                  if (data) {
                      // get table rows length
                     // var length = $("table tr[class='jqplot-table-legend']").length;
                     // var y_index = (length - 1) - data.seriesIndex;
       
                      var xaxis = $(".jqplot-xaxis-tick:eq("+data.pointIndex+")");
                      var series = $(".jqplot-table-legend-label:eq("+y_index+")");
       
                      var xaxis_txt = xaxis.text();// 横坐标值
                      var series_txt = series.text();// 类型值
       
                      var url = "chart_xy?xaxis=" + xaxis_txt + "&series=" + series_txt;// 跳转的url
                      window.open(url,"_blank"); // 新窗口打开
                  }
              }
          );
      });
      </script>
      

    • 反序(XY图)
      <script>
      var popupActionDialog = null;
      function openpopup(url) {
          if (popupActionDialog == null) {
               popupActionDialog = new PopupDialog(url);
          } else {
               popupActionDialog.src = url;
          }
          popupActionDialog.init(); 
      }
      $(function(){
          var timeOut;
          $('#jq_plot_chart').bind('jqplotDataClick',
              function (event, seriesIndex, pointIndex, data) { 
                      clearTimeout(timeOut);
                      timeOut = setTimeout(function() {
                          // get table rows length
                          var length = $("table tr[class='jqplot-table-legend']").length;
                          var y_index = (length - 1) - seriesIndex;
                          
                          var xaxis = $(".jqplot-xaxis-tick:eq("+pointIndex+")");
                          var series = $(".jqplot-table-legend-label:eq("+y_index+")");
      
                          var xaxis_txt = xaxis.text();// 横坐标值
                          var series_txt = series.text();// 类型值
      
                          var url = "chart_xy?xaxis=" + xaxis_txt + "&series=" + series_txt;// 跳转的url
                          openpopup(url); // 弹出窗打开
                      }, 300);          
              }
          ).bind('jqplotDblClick',
              function (event, coordinate, points, data) {
                  clearTimeout(timeOut);
                  if (data) {
                      // get table rows length
                      var length = $("table tr[class='jqplot-table-legend']").length;
                      var y_index = (length - 1) - data.seriesIndex;
      
                      var xaxis = $(".jqplot-xaxis-tick:eq("+data.pointIndex+")");
                      var series = $(".jqplot-table-legend-label:eq("+y_index+")");
      
                      var xaxis_txt = xaxis.text();// 横坐标值
                      var series_txt = series.text();// 类型值
      
                      var url = "chart_xy?xaxis=" + xaxis_txt + "&series=" + series_txt;// 跳转的url
                      window.open(url,"_blank"); // 新窗口打开
                  }
              }
          );
      });
      </script>
      

    • 饼图
      <script>
      var popupActionDialog = null;
      function openpopup(url) {
          if (popupActionDialog == null) {
               popupActionDialog = new PopupDialog(url);
          } else {
               popupActionDialog.src = url;
          }
          popupActionDialog.init(); 
      }
      $(function(){
          var timeOut;
          $('#jq_plot_chart').bind('jqplotDataClick',
              function (event, xIndex, yIndex, data) { 
                      clearTimeout(timeOut);
                      timeOut = setTimeout(function() {
                          var y = $(".jqplot-data-label:eq("+yIndex+")");
                          var x = $(".jqplot-table-legend-label:eq("+yIndex+")");
      
                          var y_txt = y.text();// 纵坐标值
                          var x_txt = x.text();// 横坐标值
      
                          var url = "chart_pie?x=" + x_txt + "&y=" + y_txt;// 跳转的url
                          openpopup(url); // 弹出窗打开
                      }, 300);          
              }
          ).bind('jqplotDblClick',
              function (event, coordinate, points, data) {
                  clearTimeout(timeOut);
                  if (data) {
                      var y = $(".jqplot-data-label:eq("+data.pointIndex+")");
                      var x = $(".jqplot-table-legend-label:eq("+data.pointIndex+")");
      
                      var y_txt = y.text();// 纵坐标值
                      var x_txt = x.text();// 横坐标值
      
                      var url = "chart_pie?x=" + x_txt + "&y=" + y_txt;// 跳转的url
                      window.open(url,"_blank"); // 新窗口打开
                  }
              }
          );
      });
      </script>
      
Create by Sean Fung on 2016-04-19 10:11:28.0
Last updated by Sean Fung on 2016-05-03 08:18:27.0