So erstellen Sie ein Objekt auf der Schleife

Ich verwende http://canvasjs.com/, um ein Diagramm für meine Website zu erstellen. Ich möchte eine dynamische dataPoints mit der for-Schleife erstellen. Die dataPoints werden als Variable für die canvasjs-Funktion verwendet, um das Diagramm zu zeichnen. Im Folgenden sind meine Beispieldaten und mein Code.So erstellen Sie ein Objekt auf der Schleife

Probe:

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} 
    ] 
}

Mein aktueller Code Dieser Code keine Fehler wirft. Alles, was ich auf dem Bildschirm sehe, ist nur ein weißer Bereich. Alle Werte werden korrigiert übergeben. Ich vermute, es ist so, wie ich die DataPoints strukturiert habe. Bitte helfen Sie.

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

Es ist wie dieses hier

Quelle

2016-06-22 Devil Raily

Was erwarten Sie Auf dem Bildschirm erscheinen? Sie Code erstellen keine neuen Elemente oder protokollieren nichts. –

Wenn Sie 'console.log (DataPoints)' hinzufügen, nachdem die Schleife Ihr 'DataPoints' Array ist, was erwarten Sie? Es ist nicht klar aus Ihrer Frage, ob das Problem darin besteht, dass das Array nicht korrekt erstellt wurde oder wenn danach etwas schief geht. – nnnnnn

Ist '# lookup-table-conserved' ein'

'? Und sind '# row-2001 .inflated-closing' Tabellenzeilen (' ')? – fictus

Antwort

aussehen sollten Sie haben ein funktionierendes Beispiel mit allen Informationen, die Sie geben:

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>

Quelle

2016-06-22 01:13:10

Verwandte Themen