数据源上具有 500 多个值的 Kendo UI 折线图是延迟加载的答案

【问题标题】：KendoUI Line Chart with 500+ values on datasource is lazy loaded数据源上具有 500 多个值的 Kendo UI 折线图是延迟加载的
【发布时间】：2013-01-02 21:09:29
【问题描述】：

我正在使用 Web Dataviz 包中的 Kendo UI 折线图来生成 500+ 的图表。但是图的负载太懒了。生成图表大约需要 25 秒。

我使用类别轴的日期和带有 odata 数据源的系列的十进制值。

我可以优化图表的加载时间吗？

$("#chart").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                dataSource: {
                    type: "odata",
                    transport: {
                        read: crudServiceBaseUrl + "/Odata/TestODataService.svc/EGauges"
                    },                      
                    serverFiltering: true,
                    serverSorting: true,
                    sort: { field: "DateData", dir: "asc"},
                    filter: [                       
                        {field: "From", operator: "eq", value: 422 },//400+
                        { field: "Id", operator: "eq", value: parseInt(id) },
                        { field: "Intervalo", operator: "eq", value: 23 },
                        { field: "Tipo", operator: "eq", value: 'm' }
                    ],
                title: {
                    text: ""
                },
                legend: {                       
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "area"
                },
                series: [{
                    field: "Value",
                    name: "Value"
                }],
                categoryAxis: {
                    field: "DateData",
                    labels: {
                        visible: false,
                        rotation: -90
                    }
                },
                axisDefaults: {
                    visible: true,
                    majorGridLines: { visible: false }
                },
                tooltip: {
                    visible: true                       
                }
            });

以下是 odata 服务返回数据的方式：

jQuery1704278529312834345_1357310335401({"d" : {
 "results": [
 {
     "__metadata": {
     "uri": "http://localhost/Prosol.Web/Odata/TestODataService.svc/EGauges(18)", 
     "type": "TestOpenErpInterfaz.Web.TestEntityDataSource_EGauge"
  },
 "EGaugeID": 18, 
 "From": 422, 
 "Id": 18, 
 "Tipo": "m", 
 "Intervalo": 23, 
 "DateData": "\/Date(1357310820000)\/", 
 "Value": "3.72", 
 "TotalKw": "0", 
 "TotalCosto": "0.00", 
 "TotalKwGen": "203.23999999999999999999999999", 
 "TotalCostoGen": "16.259199999999999999999999999", 
 "FechaDisplay": "Ene 4, 2013 14:47"
},........
], "__count": "421"
}
})

【问题讨论】：

你能粘贴你的代码来看看吗...
嗨...很抱歉问这个问题，但是 EGauges 的形状是什么...我的意思是它返回的是什么...以及这个 Odata 如何获取其数据 - 是通过 EF 吗？ ??你有没有在服务器端测量这需要多少时间？
Egauges 是一个 odata 服务，它返回包含 421 个对象的 json 数据集合。我已经编辑了描述以显示服务如何返回数据...服务器端没有问题，我使用 fiddler 测试了服务，返回数据需要一秒钟。此外，我尝试分离数据源并将所有数据转换为数组，然后将其关联到图表数据源，问题出在图表生成中，我也使用 KendoUI 的股票图表进行测试，加载时间更短超过 4 秒。我不能使用股票图表来解决其他问题。

标签： html telerik kendo-ui

【解决方案1】：

最后我使用 FlotCharts，由于某种原因，KendoUI Chart 加载数据非常懒惰...我使用 Kendo Ui Datasource 从 Web Service 读取数据并加载到 FloatChart...

http://www.flotcharts.org/

这是简单、快速且免费的软件

【讨论】：