Как создать объект в цикле

Question

Я использую http://canvasjs.com/ чтобы сделать диаграмму для моего сайта. Я хочу создать динамические dataPoints, используя цикл for. В dataPoints будет использоваться переменная функции canvasjs для построения диаграммы. Ниже приведены мои примеры данных и мой код.

Образец:

dataPoints: [
  { x: 10, y: 71 },
  { x: 20, y: 55},
  { x: 30, y: 50 },
  { x: 40, y: 65 },
  { x: 50, y: 95 },
  { x: 60, y: 68 },
  { x: 70, y: 28 },
  { x: 80, y: 34 },
  { x: 90, y: 14}
  ]
}

Мой текущий код Этот код не выдает никакой ошибки. Все, что я вижу на экране, это просто белая область. Все значения переданы корректирующие. Я думаю, это так, как я структурировал DataPoints. Пожалуйста помоги.

DataPoints = [];
for (year = 1; year <= years; year++){
  inflatedClosing = $('#lookup-table-preserved #row-' + year + ' .inflated-closing').text();
  if( year === years ){
    DataPoints.push({x: year, y: inflatedClosing});
  } else {
    DataPoints.push({x: year, y: inflatedClosing});
  }
}

Это должно выглядеть так

Answer 1

Здесь у вас есть рабочий пример со всей информацией, которую вы предоставляете:

var DataPoints = [], years = 3;

for (var year = 1; year <= years; year++){
  var inflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .inflated-closing').text(), 10);
  DataPoints.push({x: year, y: inflatedClosing, label : year});

}
//console.log(DataPoints);
var chart = new CanvasJS.Chart("chartContainer", {
  theme: "theme2",//theme1
  title:{
    text: "Title"              
  },
  animationEnabled: true,
  data: [              
    {
      // Change type to "bar", "area", "spline", "pie",etc.
      type: "line",
      dataPoints: DataPoints
    }
  ]
});
chart.render();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="lookup-table-preserved">
<ul id="row-1">
  <li class="inflated-closing">50</li>
</ul>
<ul id="row-2">
  <li class="inflated-closing">100</li>
</ul>
<ul id="row-3">
  <li class="inflated-closing">200</li>
</ul>
</div>
<div id="chartContainer" style="height: 300px; width: 100%; margin-top: 20px;"></div>