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

Question

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

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

问题：看起来我的变量var json和var stringData正在捕获数据，但是当我将它们中的任何一个传递给我的chart.data()变量（例如chart.data = [stringData];）时，数据没有填充到表中。我已经环顾 Stack Overflow 寻求有关此问题的一些帮助，但我还没有找到任何实质性内容。任何帮助将非常感激！

有问题的行：我认为可以仔细检查的代码行是69、82-85、91和102 行。

图表中工作数据的 JSFiddle 示例：

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

演示：

$('#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');

    }

Answer 1

图表库需要一个对象数组，但您传递给它的是一个包含 1 个字符串元素的数组。由于您已经构建json了一个对象数组，只需传递它即可。//&nbsp;Add&nbsp;data chart.data&nbsp;=&nbsp;json;看到这个小提琴：https&nbsp;:&nbsp;//jsfiddle.net/juye1oaz/