kendoui图表中数据源的问题 [英] Problem with the datasource in a kendoui chart

问题描述

这是我的代码，但它不起作用......什么都不显示：|

我做错了什么？

如何在函数中调用数据源？

< div id =exampleclass =k-content absConf> 
< div class =chart-wrapperstyle =margin：auto;> 
< div id =chart>< / div> 
< / div> 
< script type =text / javascript> 
 
 var transport = {
 read：{
 url：...
} 
}; 
 
 var data = new kendo.data.DataSource（{
 transport：transport，
 sort：{
 field：day，
 dir： asc
} 
}）; 
 
 
 
 
 
 
函数createChart（）{
 
 $（＃chart）。kendoChart （{
主题：$（文件）.data（kendoSkin）||silver，
 dataSource：data，
 
 
 
 title ：{
 text：每日价值
}，
图例：{
位置：top，
字体：18px Verdana
 
}，
 seriesDefaults：{
类型：line
}，
系列：
 [{
字段：value， 
名称：value
}]，
 
 valueAxis：{
字段：value
}，
 categoryAxis：{
字段：day
}，
 
 
工具提示：{
 visible：true，
格式：N0
} 
}）; 
} 
 
 $（document）.ready（function（）{
 setTimeout（function（）{
 
 
 createChart（）; 
 
 $（＃example）。bind（kendo：skinChange，function（e）{
 createChart（）; 
 data.read（）; 
}）; 
}，400）; 
}）; 
 
< / script> 
< / div> 

和网络服务的结果：

 {day： 星期一，价值： 10} ，{day： 星期二，价值：18}  ，{day： Wednesday，value：43} ; 

解决方案

（＃chart）。kendoChart（{
theme：

（document）。 data（kendoSkin）||silver，
dataSource：data，



title：{
text：Value per day
}，
legend：{
position：top，
font：18px Verdana

}，
seriesDefaults：{
类型：line
}，
系列：
[{
字段：value，
名称：value
}]，

valueAxis：{
字段：value
}，
categoryAxis：{
字段：day
}，


工具提示：{
visible：true，
格式：N0
}
}）;
}

（document）.ready（function（）{
setTimeout（function（）{


createChart（ ）;

Here is my code but it does not work... shows nothing :|
what have i done wrong?
how to call the datasource in the function?

<div id="example" class="k-content absConf">
            <div class="chart-wrapper" style="margin: auto;">
                <div id="chart"></div>
            </div>
            <script type="text/javascript">

                var transport = {
                    read: {
                        url: "..."
                    }
                };

                var data = new kendo.data.DataSource({
                    transport: transport,
                    sort: {
                        field: "day",
                        dir: "asc"
                    }
                });
                
               
             



 function createChart() {

     $("#chart").kendoChart({
         theme: $(document).data("kendoSkin") || "silver",
         dataSource: data,
             
         

         title: {
             text: "Value per day"
         },
         legend: {
             position: "top",
             font: "18px Verdana"

         },
         seriesDefaults: {
             type: "line"
         },
         series:
                        [{
                            field: "value",
                            name: "value"
                        }],

         valueAxis: {
             field: "value"
         },
         categoryAxis: {
             field: "day"
         },


         tooltip: {
             visible: true,
             format: "N0"
         }
     });
                 }

                 $(document).ready(function () {
                     setTimeout(function () {


                         createChart();

                         $("#example").bind("kendo:skinChange", function (e) {
                             createChart();
                             data.read();
                         });
                     }, 400);
                 });
                        
            </script>
        </div>

and the result from the webservice :

{ "day": "Monday", "value": 10 }, { "day": "Tuesday", "value": 18 }, { "day": "Wednesday", "value": 43 } ;

解决方案

("#chart").kendoChart({ theme:

(document).data("kendoSkin") || "silver", dataSource: data, title: { text: "Value per day" }, legend: { position: "top", font: "18px Verdana" }, seriesDefaults: { type: "line" }, series: [{ field: "value", name: "value" }], valueAxis: { field: "value" }, categoryAxis: { field: "day" }, tooltip: { visible: true, format: "N0" } }); }

(document).ready(function () { setTimeout(function () { createChart();

这篇关于kendoui图表中数据源的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！