2016-06-22 4 views
0

Я использую http://canvasjs.com/, чтобы составить диаграмму для моего сайта. Я хочу создать динамические точки данных, используя цикл 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}); 
    } 
} 

Он должен выглядеть как этот enter image description here

+0

Что вы ожидаете появляться на экране? Вы не создаете новые элементы или ничего не записываете. –

+0

Если вы добавите 'console.log (DataPoints)' после того, как цикл будет вашим массивом DataPoints', что вы ожидаете? Из вашего вопроса неясно, является ли проблема, что массив создан неправильно или что-то не так после этого. – nnnnnn

+0

«# lookup-table-saved' a'

'? И строки строк '# row-2001 .inflated-close' (' ')? – fictus

ответ

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();
<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>

Смежные вопросы