Question

我正在尝试在运行时添加带有id的div。然后同时尝试将kendo ui图表添加到该div中。但我无法做到这一点。如果有人有任何建议。紧急。我有一个文本框，我在其中输入一个值，然后尝试添加该数字。

这是我的代码：

function createChart() { 
    var noofcharts = document.getElementById('noOfCharts').value; 

    for(var i=1;i<=noofcharts;i++){ 
        var varSlid = "chart"+i; 
        var div= $("<div id='+varSlid+' style='display:inline-block;width: 20%; height: 20%;border:2px solid;'></div>" ); 
        $(document.body).append(div); 
        div.kendoChart({ series: [ { data: [1, 2] } ] }); 
    } 
}

这是错误：

错误：未声明HTML文档的字符编码。该文档将在某些浏览器中使用乱码文本进行渲染如果文档包含来自外部的字符，则配置 US-ASCII范围。必须在中声明页面的字符编码文件或转让协议

Answer 1

试试这个：

function createChart() {
    var noofcharts = $('#noOfCharts').val();

    for (var i = 1; i <= noofcharts; i++) {
        var varSlid = "chart" + i;
        var div = $("<div id='"+varSlid+"' style='display:inline-block;width: 20%; height: 20%;border:2px solid;'></div>");
        $(document.body).append(div);
        div.kendoChart({ series: [
            { data: [1, 2] }
        ] });
    }
}

这应该产生这样的东西：

<body>
    <div id="chart1" style="display: inline-block; width: 20%; height: 20%; border: 2px solid; position: relative;" data-role="chart" class="k-chart">
    <!-- some codes for kendo chart -->
    </div>
    <div id="chart2" style="display: inline-block; width: 20%; height: 20%; border: 2px solid; position: relative;" data-role="chart" class="k-chart">
    <!-- some codes for kendo chart -->
    </div>
    <div id="chart3" style="display: inline-block; width: 20%; height: 20%; border: 2px solid; position: relative;" data-role="chart" class="k-chart">
    <!-- some codes for kendo chart -->
    </div>
</body>

KENDO UI - 尝试在运行时添加div

1 个答案: