세로 막 대형 차트의 툴팁을 프로그래밍 방식으로 하이 차트로 변경하는 방법

Question

드릴 다운 차트는 처음 세 레벨이 세로 막 대형 차트이고 네 번째 레벨은 원형 차트입니다. 각 레벨에서 툴팁을 변경해야합니다. 프로그래밍 방식으로 변경할 수 없습니다. 툴팁을 변경할 수있는 기능이 있습니까?

var chartLevel = 0; //gloabal variable 
function drawYearlyChart(val) 
{ 
    var arr = val.toString().split("\n"); 
    var chart; 
    var colors = Highcharts.getOptions().colors, 
     categories = eval(arr[0].toString()), 
     name = 'Yearly Report', 
     data = eval(arr[1].toString()); 

    function setChart(name, categories, data, color,type) { 
    chart.xAxis[0].setCategories(categories); 
    chart.series[0].remove(); 
    chart.setTitle(); 
    if(chartLevel==1) 
    { 
     chart.yAxis[0].axisTitle.attr({text: 'Number of question'}); 

     //Here i want some function to change the tooltip of column chart 
    } 
    chart.addSeries({ 
     name: name, 
     data: data, 
     color: color || colors[0], 
     type: type || 'column' 
    }); 
    if(chartLevel==3) 
    { 
     chartLevel = 0; 
     chart.yAxis[0].axisTitle.attr({text: 'Number of sessions'}); 
    } 
    else 
     chartLevel++; 
    } 

    chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'chart', 
     type: 'column' 
    }, 
    title: { 
     text: 'Your yearly report till now' 
    }, 
    subtitle: { 
     text: 'Click the columns to view report for that particular period.' 
    }, 
    xAxis: { 
     categories: categories 
    }, 
    yAxis: { 
     title: { 
     text: 'Number of session' 
     }, 
     allowDecimals: false, 
     id: 'yXis' 
    }, 
    plotOptions: { 
     column: { 
     cursor: 'pointer', 
     point: { 
      events: { 
      click: function() { 
       var drilldown = this.drilldown; 
       if (drilldown) { // drill down 
       setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type); 
       } else { // restore 
       setChart(name, categories, data); 
       } 
      } 
      } 
     }, 
     dataLabels: { 
      enabled: true, 
      color: colors[0], 
      style: { 
      fontWeight: 'bold' 
      }, 
      formatter: function() { 
      return this.y +''; 
      } 
     }, 
     tooltip: { 
      pointFormat: '<span style="color:{series.color}">{point.name}</span>: <b>{point.y}</b><br/>Click to view {point.name} report', 
      valueSuffix: ' Sessions' 
     } 
     }, 
     pie: { 
     showInLegend: true, 
     dataLabels: { 
      enabled: true, 
      formatter: function(){ 
      return (this.y+' Questions<br>'+this.percentage+'%'); 
      } 
     }, 
     tooltip:{ 
      pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/> Click to return to yearly report', 
      valueSuffix: ' quesitons' 
     }, 
     events: { 
      click: function(){ 
      var drilldown = this.drilldown; 
      if (drilldown) { // drill down 
       setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color,drilldown.type); 
      } else { // restore 
       setChart(name, categories, data); 
      } 
      } 
     } 
     } 
    }, 
    series: [{ 
     name: name, 
     data: data, 
     color: '#4572A7' 
    }], 
    exporting: { 
     enabled: false 
    } 
    }); 
} 

어떤 제안 또는 솔루션이 appriciated됩니다 - 여기에 코드입니다. 감사합니다.

Answer 1

툴팁 포맷터 기능을 사용하여 툴팁 내용을 변경할 수 있습니다. 자세한 내용과 예제 문서를 참조하십시오 : 그것은 당신이 당신의 차트의 시리즈에 원하는 출력을 만드는 데 사용할 수있는 컨텍스트 (this.myProp가),의에 http://api.highcharts.com/highcharts#tooltip.formatter

이 기능은 여러 속성을 가져옵니다.