Javascript не показывает общую стоимость в середине Oracle APEX Donut chart

Я пытаюсь использовать приведенный ниже код (найденный на форуме) в качестве кода инициализации JavaScript в Oracle APEX Donut chart для отображения общего значения в середине. Но результат показывает только текст "Итого" в середине графика и не показывает никакого числового значения. Может кто-нибудь помочь мне в обнаружении ошибки из приведенного ниже кода? Я новичок в Javascript и очень мало знаю об этом.

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
}

варианты возврата; }

2 ответа

Если я правильно понял, попробуйте исправить, добавить в centerCallback,

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

Не могли бы вы попробовать это

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

Добавьте следующее утверждение в this.pieSliceLabel = function(dataContext){}

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

Обновите приведенный ниже код innerHTML в this.centerCallback = function(dataContext){}

  //updated element
  pieElem.innerHTML = 
      '<div id="myDiv" style="position:absolute;text-align:center;font-size:16px;">' +
          'Total' + total +
      '</div>';
Другие вопросы по тегам