Question

问题：为什么我的对象没有将数据填充到图表中？

背景：我正在创建一个财务计算器，提交成功后，会向用户显示带有年度计算的条形图。

问题：看来我的变量[Consumes("multipart/form-data")]和var json正在捕获数据，但是当我将其中任何一个传递给我的var stringData变量时（例如chart.data()）表中没有填充数据。我到处都在Stack Overflow上寻求有关此问题的帮助，但是我还没有发现任何实质内容。任何帮助将不胜感激！

有问题的行：我认为可能需要更仔细检查的代码行是 69 ， 82-85 ， 91行和 102 。

JSF图表中工作数据的中间示例：

https://jsfiddle.net/yL3c6s1j/1/

演示：

chart.data = [stringData];

$('#submit').click(function() {
  var name = $('#name'),
    age = $('#age'),
    retAge = $('#retAge'),
    retPackage = $('#retPackage'),
    contribution = $('#annualContribution'),
    rate = $('#annualRateReturn'),
    display = $('#display');
  var nameVal = name.val(),
    ageVal = age.val(),
    retAgeVal = retAge.val(),
    workingYears = retAgeVal - ageVal,
    retPackageVal = parseFloat(retPackage.val()),
    contributionVal = parseFloat(contribution.val()),
    rateVal = parseFloat(rate.val());

  if (nameVal === '' || ageVal === '' || ageVal > retAgeVal || retAgeVal === '' || retAgeVal < ageVal || isNaN(retPackageVal) || isNaN(contributionVal) || isNaN(rateVal)) {

    // Hides DOM response after unsuccessful form submission
    display.hide();

    // Checks for empty name
    if (nameVal === '') {
      name.addClass('error');
    } else {
      name.removeClass('error');
    }

    // Checks for empty age or if age is greater than retirement age
    if (ageVal === '' || ageVal > retAgeVal) {
      age.addClass('error');
    } else {
      age.removeClass('error');
    }

    // Checks for empty retirement age or if retirement age is less than age
    if (retAgeVal === '' || retAgeVal < ageVal) {
      retAge.addClass('error');
    } else {
      retAge.removeClass('error');
    }

    // Checks for empty current 401(k) value
    if (isNaN(retPackageVal)) {
      retPackage.addClass('error');
    } else {
      retPackage.removeClass('error');
    }

    // Checks for empty annual contribution
    if (isNaN(contributionVal)) {
      contribution.addClass('error');
    } else {
      contribution.removeClass('error');
    }

    // Checks for empty annual rate of return
    if (isNaN(rateVal)) {
      rate.addClass('error');
    } else {
      rate.removeClass('error');
    }

  } else {
    // Removes error styling from all fields on successful submission
    $('input[type="text"], input[type="number"]').removeClass('error');
    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.XYChart);
    var json = [];

    // Clears DOM response after every successful form submission and shows the new/updated response
    display.html('').show();

    console.log('Hello, ' + nameVal + '!  Assuming you are able to annually contribute $' + contributionVal + ' with an average annual rate of return of ' + parseInt(rateVal) + '%, the estimated value of your 401(k) over the course of the next ' + workingYears + ' years will look like this:');

    // 401(k) calculation logic
    for (ageVal; ageVal < retAgeVal; ageVal++) {
      var compoundInterest = (retPackageVal + contributionVal) * (rateVal / 100);
      var retPackageVal = retPackageVal + contributionVal + compoundInterest;
      var parsedAge = parseInt(ageVal) + 1;

      json.push({
        'age': parsedAge,
        '401k': retPackageVal
      });

    }
  }


  var stringData = JSON.stringify(json);
  console.log(stringData);
  // 		start chart

  am4core.options.commercialLicense = true;

  // Apply chart themes
  am4core.useTheme(am4themes_animated);
  am4core.useTheme(am4themes_kelly);

  // Add data
  chart.data = [stringData];

  // Create axes
  var categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
  categoryAxis.dataFields.category = "age";
  categoryAxis.title.text = "Retirment age";
  categoryAxis.renderer.grid.template.location = 0;
  categoryAxis.renderer.minGridDistance = 20;

  var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
  valueAxis.title.text = "Total Income ($)";
  valueAxis.totalText = "Total: [[total]]";
  // Create series

  var series = chart.series.push(new am4charts.ColumnSeries());
  series.dataFields.valueY = "401k";
  series.dataFields.categoryX = "age";
  series.name = "401k and Other Savings";
  //series3.tooltipText = "{name}: [bold]{valueY}[/]";
  series.stacked = true;


  /* Add a single HTML-based tooltip to first series */
  series.tooltipHTML = `<div class="heading-color"><center><strong><span class="heading-color">Estimated Annual Income at Age : {categoryX}</span></strong></center></div>
<hr />
<table class="table-color">
<tr>
<th align="left">401(k) value : </th>
<td>{401k}</td>
</tr>`;
  series.tooltip.label.interactionsEnabled = true;
  series.tooltip.pointerOrientation = "vertical";
  // add color to fill tooltip
  series.tooltip.getFillFromObject = false;
  series.tooltip.background.fill = am4core.color("#fff");
  series.tooltip.background.cornerRadius = 0;
  series.tooltip.strokeWidth = 0;
  series.tooltip.getFillFromObject = false;
  //series3.tooltip.background.fill = am4core.color("#fff");
  //series3.tooltip.label.fill = am4core.color("#000");

  // Add cursor
  chart.cursor = new am4charts.XYCursor();

  // Add legend
  chart.legend = new am4charts.Legend();

  // 		end chart

})

input[type="text"],
input[type="number"] {
  margin: 5px 0px;
  padding: 10px;
  border: 1px solid #999;
}

.error {
  border: 1px solid #FF0000 !important;
}


/* Chart Styling */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 9pt;
}

#chartdiv {
  width: 100%;
  height: 400px;
}

.heading-color {
  color: #000;
}

.table-color {
  color: #000;
}

.table-color .saving-401k {
  color: #f38400 !important;
}

.table-color .pension {
  color: #f3c300 !important;
}

.table-color .social {
  color: #875692 !important;
}

Answer 1

制图库需要一个对象数组，但是您要向其传递一个包含1个字符串元素的数组。由于您已经将json构建为对象数组，因此只需传递它即可。

// Add data
chart.data = json;

查看这个小提琴：https://jsfiddle.net/juye1oaz/

为什么我的对象没有将数据填充到图表中？（包括演示）

1 个答案:

为什么我的对象没有将数据填充到图表中？ （包括演示）

1 个答案:

为什么我的对象没有将数据填充到图表中？（包括演示）