Javascript未显示在Oracle APEX Donut图表中间的总价值

Question

I am trying use below code (found from a forum) as JavaScript initialization code in Oracle APEX Donut chart to display total value in middle. But the result showing up only the Text "Total" in middle of the chart and does not show any numerical value. Can anyone help me out in spotting the error from the below code ? I am new to Javascript and have very less knowledge about the same.

function( options ){ 

  var total;  
  this.pieSliceLabel = function(dataContext){

  var series_name;
       percent = Math.round(dataContext.value/dataContext.totalValue*100);
       total = Math.round(dataContext.totalValue);

    if ( dataContext.seriesData ) {
        series_name = dataContext.seriesData.name;
    } else {
        series_name = 'Other';
    }
    document.getElementById("myDiv").innerHTML = Math.round(dataContext.totalValue);
    return series_name + " " + percent + "% ( " + dataContext.value + " )";
} 
// Set chart initialization options 
options.dataLabel = pieSliceLabel; 

this.centerCallback = function(dataContext){
  var pieElem = document.createElement('div');

  pieElem.innerHTML = 
  '<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
      'Total' +' '+ total +
  '</div>';

  var outerDiv = pieElem.children[0];

  var innerBounds = dataContext.innerBounds;

  // Outer bounds
  outerDiv.style.top = innerBounds.y + "px";
  outerDiv.style.left = innerBounds.x + "px";
  outerDiv.style.height = innerBounds.height + "px";
  outerDiv.style.width = innerBounds.width + "px";
  outerDiv.style.lineHeight = innerBounds.height + "px";
  return  pieElem;
}

options.pieCenter = {  
          renderer : centerCallback
}

return options; }

Answer 1

if I correct understood, try to fix it, add to centerCallback ,

var value = dataContext.totalValue;
pieElem.innerHTML = 
      '<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
          'Total ' + value +
      '</div>';

Answer 2

Could you try this

function( options ){ 
// will hold the total value, must be global variable
var total;

Add below statement in this.pieSliceLabel = function(dataContext){}

    percent = Math.round(dataContext.value/dataContext.totalValue*100);
    total = dataContext.totalValue; //assign to global variable

Update the below innerHTML code in this.centerCallback = function(dataContext){}

  //updated element
  pieElem.innerHTML = 
      '<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
          'Total' + total +
      '</div>';