Question

我正在尝试使用以下代码（从论坛中找到）作为Oracle APEX Donut图表中的JavaScript初始化代码，以在中间显示总价值。但是结果仅在图表中间显示文本“总计”，而不显示任何数值。谁能帮我找出以下代码中的错误？我是Java的新手，对Java的了解却很少。

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
}

返回选项； }

Answer 1

如果我理解正确，请尝试修复它，然后添加到centerCallback，

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

Answer 2

您能尝试这个吗

  const { Component, pageProps, store } = this.props;
    console.log('rendering _app.js, main render, props = ', this.props);

    return (
      <Container>
        <Head />
        {/* Wrap every page in Jss and Theme providers */}
        <style dangerouslySetInnerHTML = {{ __html: style }} />
        <JssProvider
          registry={this.pageContext.sheetsRegistry}
          generateClassName={this.pageContext.generateClassName}
        >
          {/* MuiThemeProvider makes the theme available down the React
              tree thanks to React context. */}
          <MuiThemeProvider
            theme={this.pageContext.theme}
            sheetsManager={this.pageContext.sheetsManager}
          >
          <Layout>
            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
            <CssBaseline />
            {/* Pass pageContext to the _document though the renderPage enhancer
                to render collected styles on server-side. */}
            <Provider store={store}>

            <Component pageContext={this.pageContext} {...pageProps} />
            </Provider>

          </Layout>
          </MuiThemeProvider>
        </JssProvider>
      </Container>
    );
  }

在 this.pieSliceLabel = function（dataContext）{}

中添加以下语句

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

在 this.centerCallback = function（dataContext）{}

中更新以下innerHTML代码

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

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

2 个答案: