如何在循环上创建对象

时间:2016-06-22 00:45:16

标签: javascript jquery canvasjs

我'我正在使用http://canvasjs.com/为我的网站制作图表。我想使用for循环创建动态dataPoints。 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});
  }
}

看起来应该是这样的 enter image description here

1 个答案:

答案 0 :(得分:0)

这里有一个工作示例,其中包含您提供的所有信息:

&#13;
&#13;
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();
&#13;
<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>
&#13;
&#13;
&#13;