我'我正在使用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});
}
}
答案 0 :(得分:0)
这里有一个工作示例,其中包含您提供的所有信息:
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;