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

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了一个对象数组，只需传递它即可。

// Add data
chart.data = json;

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