차트 배열 생성

Question

차트 배열을 생성하여 DOM에 삽입하려고합니다.

like that: 
Var array = []; 
array[0].kendoChart ({// .........}); 
array[1].kendoChart ({// .........}); 
array.forEach (function (el) { 
$('body').append(el); 
}) 

어떻게 할 말해 (내가 템플릿으로이 차트를 사용하고 적절한 시간을 삽입 할)?

Answer 1

차트를 생성하고 삽입 할 때 생성하는 데 사용되는 데이터 배열을 유지합니다. 차트가 삽입되는 컨테이너를 제공하는 HTML에

전환 (예와 같이 본체 될 수 있음) :

이어서

<div id="chartsContainer" ></div> 

스크립트가 복수 차트, 예를 생성하기 위해 필요한 데이터의 배열 :

배열 통해 마지막 루프

var charts = [ 
    { 
     chartid: "id1", title: "Chart 1", 
     data: [{ x: "item1", y: 2}, { x: "item2", y: 4},{ x: "item3", y: 1}] 
    }, 
    { 
    chartid: "id2", title: "Chart 2", 
    data: [{ x: "item1", y: 8}, { x: "item2", y: 3},{ x: "item3", y: 7},{ x: "item4", y: 2}] 
    },   
    { 
    chartid: "id3", title: "Chart 3", 
    data: [{ x: "item1", y: 1}, { x: "item2", y: 2},{ x: "item3", y: 4} ] 
    },   
]; 

용기에 삽입 된 div 각 DIV에 차트를 만들 :

$("#chartsContainer").empty(); 
    var arrayLength = charts.length; 
    for (var i = 0; i < arrayLength; i++) { 
    var div = $('<div id="' + charts[i].chartid + '"></div>'); 
    $("#chartsContainer").append(div); 
    div.kendoChart({ 
     theme: "Flat", 
     chartArea: { height: 200 }, 
     dataSource: {data: charts[i].data }, 
     title: { text: charts[i].title}, 
     seriesDefaults: {type: "column"}, 
     series: [{field: "y" }],    
     categoryAxis: { 
      field: "x", 
      majorGridLines: {visible: false }, 
     }    
    }); 
    } 

작업 DEMO