正在使用 DEMO

Question

我想生成一个图表数组并将它们插入到DOM中。（我想将这些图表用作模板并在合适的时间插入它们）

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

告诉我该怎么做？

Answer 1

我会保留一组用于生成图表的数据，然后在插入时生成它们。

在HTML中为要插入的图表提供容器（可以是示例中的正文）：

    teams.forEach(function(team,key){
        for(g=1;g<=games_series;g++) {
            var error = false;
            for(b=1;b<=bowlers_team;b++) {
                var class_name = "p"+b+team+"_g"+g;
                scores = jQuery("."+class_name).length;
console.log("Id:"+class_name+" has "+scores+" scores.\r\n");
                jQuery("."+class_name).each(function () {
                    score_id = this.id;
console.log("Score fields:"+score_id+"\r\n");
console.log("Class Name:"+jQuery("#"+score_id).attr('class')+"\r\n");
                });

然后在脚本中有一个生成多个图表所需的数据数组，例如：：

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

最后循环遍历数组，在容器中插入DIV并在每个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} ]
    },         
];

生成一系列图表

1 个答案:

正在使用 DEMO