ハイチャートドーナツ - スライスを開くには、userServiceから検索してページを開きます。

Question

私はドーナツ円グラフを持っています。下記のような凡例項目のクリック時にそれがuserSeviceから取得し、特定のページに移動します -

pic of user service] 1

legendItemClick：私はをクリックしたとき、私は、同じ機能を探しています

function(e) { debugger; 
    this.userService.search(e.target.id); 
    return false; 
}.bind(this) 

特定の関連ページに移動する必要があるグラフの円のスライス。私はこれを試してみましたが、うまくいかなかった -

point: { 
    events: { 
     click: function(e){ 
      this.userService.search(e.target.id); 
      return false; 
     }.bind(this) 
    } 
} 

私は間違っていますか？

UserServiceの -

search(id: any) { 
     let headers = new Headers(); 


     let data = { "jql": id }; 
     let body = JSON.stringify(data); 
     let http: Http 
     var method = method || "post"; 
     var params; 
     var path ;  
     path = ' http://imptdg/IMR/Ticket/DashBoard'; 
       var form = document.createElement("form"); 
       form.setAttribute("method", method); 
       form.setAttribute("action", path);   
         var hiddenField = document.createElement("input"); 
         hiddenField.setAttribute("type", "hidden"); 
         hiddenField.setAttribute("name", 'jql'); 
         hiddenField.setAttribute("value", id); 
         form.appendChild(hiddenField); 
       document.body.appendChild(form); debugger; 
       form.submit(); 



    } 


defaults() { 
    this.options = { 

     title: { text: ' ' }, 
     colors: ['rgba(79, 162, 189, 1)', 'rgba(84, 135, 201, 1)', 'rgba(143, 185, 91, 1)', 'rgba(90, 183, 130, 1)', 'rgba(71, 195, 185, 1)', 'rgba(190, 120, 203, 1)', 'rgba(228, 211, 84, 1)', 'rgba(43, 144, 143, 1)', 'rgba(145, 232, 225, 1)'], 
     chart: { 
      type: 'pie', 
      animation: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     responsive: { 
      rules: [{ 
       condition: { 
        maxWidth: 300 
       }, 
       chartOptions: { 
        legend: { 
         align: 'center', 
         verticalAlign: 'bottom', 
         layout: 'vertical', 
         labelFormatter: function() { 
          return '<div style="width:180px"><span class="pull-left" style= "font-weight: 500; padding-bottom: 5px; font-family:Helvetica ">' + this.name + 
           '</span><span class="pull-right" style= "font-weight: 500" >' + this.value + 
           '</span></div> '; 
         } 
        }, 
        pie: { 
         size: 50, 
         innerSize: 20 
        } 
       } 
      }] 
     }, 

     plotOptions: { 
      pie: { 
       innerSize: '40%', 
       allowPointSelect: true, 
       slicedOffset: 0,      
       cursor: 'pointer', 
       dataLabels: { 
        enabled: false 
       }, 

       showInLegend: true,         
       point: { 
        events: { 
         click:function(e){ 
          this.userService.search(e.target.id); // this part not working 
          return false; 
         }.bind(this), 

         legendItemClick: function (e) { 

          this.userService.search(e.target.id); 
          return false; 
         }.bind(this), 

        } 

        }, 
       states: { 
        hover: { 
         halo: { 
          size: 0 
         }, 
         enabled : true 
        } 
       } 
      }, 

      series: { 
       animation: false, 

       } 

       }, 




     }, 

     legend: { 
      useHTML: true, 
      enabled: true, 
      align: 'right', 
      verticalAlign: 'top', 
      layout: 'vertical', 
      symbolHeight: 12, 
      itemMarginBottom: 1, 
      symbolWidth: 25, 
      symbolRadius: 1, 
      labelFormatter: function() { 
       return '<div style="width:180px;"><div class="pull-left" style= "font-weight: 500; padding-bottom: 3px;padding-top:3px; width: 130px; font-family:Helvetica; white-space: normal; word-break:break-word ">' + this.name 

      }, 


      }, 
     }, 

     series: [{ 
      data: this.donutchartData, 
      allowPointSelect: true 
     }] 
    }; 

} 

}

Answer 1

をクリックし、私が持っていますhighchartドーナツのAPIドキュメントを参照してください - https://api.highcharts.com/highcharts/plotOptions.pie.events.click。今私は探していた適切なページに移動しています。

point: { 
          events: { 
           click:function(e){ 

            this.userService.search(e.point.id); 

           }.bind(this) 

Answer 2

あなた系列データを使用して、ポイントからIDを取得する必要が[{name: 'Category 1', id: 1, y: 20}, ...]のようなものであると仮定すると、それが今取り組んでいる

defaults() { 
    let self = this; // store this in self so you can use component this and highcharts point event this 
    this.options = { 
     // other options 
     plotOptions: { 
      pie: { 
       point: { 
        function(e){ 
         let id = this.id; // get id from series data 
         self.userService.search(id); 
         return false; 
        } 
       } 
      } 
     } 
    } 
}