highchart 도넛 - 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; 
        } 
       } 
      } 
     } 
    } 
}