Как изменить всплывающую подсказку диаграммы столбца программно в highchart

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. Thanks

Answer 1

Вы можете изменить содержимое всплывающей подсказки с помощью функции форматирования всплывающей подсказки. Подробные сведения и примеры см. В документах: http://api.highcharts.com/highcharts#tooltip.formatter

Эта функция получает несколько свойств в своем контексте (this.myProp), которые вы можете использовать для создания нужного результата в любой из ваших диаграмм.