Как динамически установить заголовок в круговой диаграмме Highcharts

Question

Я хочу, чтобы динамически передаваемый текст был заглавным, основываясь на условии if else в круговой диаграмме, используя плагин с высокими графиками. Я пробовал атрибут событий, а также chart.setTitle({text:mydesiredtitle}), но это не помогло мне.

Я занимаюсь серфингом на форумах и блогах, мне ничего не помогло. Вот Я прилагаю мой код:

var textElement; 
function RenderDonutChart(container,complete,incomplete,fillColor,nonfillColor) { 
var dataText = true; 
//complete and incomplete are integers 
//container is my div to load chart. 
if(!($.isNumeric(complete))) 
{ 
    dataText = false; 
    complete = 0; 
    incomplete = 100; 
} 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: container, 
     type: 'pie', 
     plotShadow: false, 
     backgroundColor: null, 
     spacing: [0, 0, 0, 0], 
     margin: [0, 0, 0, 0] 
    }, 
    plotOptions: { 
     pie: { 
      animation: false, 
      borderWidth: 0, 
      innerSize: '90%', 
      dataLabels: { 
       enabled: false 
      } 
     }, 
     series: { 
      states: { 
       hover: { 
       enabled: true 
       } 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    title: { 
     text: '' 
    }, 
    title: { 

     text: '', 
     align: 'center', 
     verticalAlign: 'middle', 
     y: 10, 
     }, 

    events: { 
     load: function() { 
      alert("load works"); 
      if(!(dataText)) 
      { 
       if(textElement != null) 
       { 
        textElement.destroy(); 
       } 
       alert("null dataText"); 
       textElement = '<span style="font-family:abel-Regular;font-size:16px;color:#ffffff">Not Applicable</span>'; 
       chart.setTitle({text: textElement}); 
      } 
      else 
      { 
       if(textElement != null) 
       { 
        textElement.destroy(); 
       } 
       alert("true dataText"); 
       textElement = '<div style="font-family:abel-Regular;font-size:38px;color:#e57104">' 
         + complete + 
         '%</div><br><span style="font-family:abel-Regular;font-size:16px;color:#ffffff">Completed</span>'; 
       chart.setTitle({text: textElement}); 
      } 
     } 
    }, 

    tooltip: { 
     enabled: false 
    }, 
    exporting: { 
     enabled: false 
    }, 
    series: [{ 
     data: [complete,incomplete] 
    }], 
    colors: [fillColor, nonfillColor] 
}); 
} 

Answer 1

this ключевое слово относится к самому объекту в load события. Используйте this вместо chart (который еще не установлен к моменту запуска события загрузки), и все будет в порядке.

chart: { 
     events: { 
      load: function() { 
       var textElement = '<span style="font-family:abel-Regular;font-size:16px;color:#000">Not Applicable</span>'; 
       this.setTitle({text: textElement}); 
      } 
     } 
    }, 

http://jsfiddle.net/7hmcw9wu/1/