剑道图表现问题

Question

我正在剑道图上工作。我在图表上加载了30k数据。 你可以在我附加的代码中看到，当我用鼠标滚动缩放时，过程变得非常缓慢。是否有可能减少每个进程的执行时间？也是第一次加载图表也很慢。

我想知道是否应该加载Kendo图表上的30k数据？ Kendo在图表上加载数据有没有限制？

var Chartdata = []; 
 

 
function createChart() { 
 
    $("#chart").kendoChart({ 
 
    dataSource: { 
 
     data: Chartdata 
 
    }, 
 
    series: [{ 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "close" 
 
    }, { 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "volume" 
 
    }, { 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "high" 
 
    }, { 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "low" 
 
    }, { 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "open" 
 
    }, { 
 
     type: "scatterLine", 
 
     xField: "date", 
 
     yField: "symbol" 
 
    }], 
 
    xAxis: { 
 
     name: "Date", 
 
     baseUnit: "minutes", 
 
     BaseUnitSteps: { 
 
     second: [1] 
 
     }, 
 
     labels: { 
 
     visible: true, 
 
     step: 50, 
 
     font: "8px Arial,Helvetica,sans-serif", 
 
     template: "#= kendo.toString(new Date(value), 'MM/dd/yyyy HH:mm:ss') #" 
 
     }, 
 
     majorUnit: 1, 
 
     majorTickType: "none", 
 
     majorGridLines: { 
 
     step: 5, 
 
     }, 
 
     minorGridLines: { 
 
     visible: true, 
 
     step: 1, 
 
     }, 
 
     minorTickType: "none", 
 
     majorTickType: "none", 
 
    }, 
 
    yAxis: { 
 
     majorUnit: 25, 
 
     majorTickType: "none", 
 
     majorGridLines: { 
 
     step: 1, 
 
     }, 
 
     minorGridLines: { 
 
     visible: true, 
 
     step: 1, 
 
     }, 
 
     minorTickType: "none", 
 
     majorTickType: "none", 
 
    }, 
 
    transitions: false, 
 
    zoomable: { 
 
     mousewheel: { 
 
     lock: "y" 
 
     }, 
 
     selection: { 
 
     lock: "y" 
 
     } 
 
    }, 
 
    zoom: setRange, 
 
    }).data("kendoChart"); 
 
} 
 

 
function setRange(e) { 
 
    var chart = e.sender; 
 
    var options = chart.options; 
 
    e.originalEvent.preventDefault(); 
 
    var xRange = e.axisRanges.Date; 
 
    if (xRange) { 
 
    var xMinonzoom = xRange.min; 
 
    var xMaxonzoom = xRange.max; 
 
    var dMaxonzoom = new Date(xMaxonzoom.getYear(), xMaxonzoom.getMonth(), xMaxonzoom.getDay(), xMaxonzoom.getHours(), xMaxonzoom.getMinutes(), xMaxonzoom.getSeconds()); 
 
    var dMinonzoom = new Date(xMinonzoom.getYear(), xMinonzoom.getMonth(), xMinonzoom.getDay(), xMinonzoom.getHours(), xMinonzoom.getMinutes(), xMinonzoom.getSeconds()); 
 
    var diff = dMaxonzoom - dMinonzoom; 
 
    if (xMaxonzoom - xMinonzoom < 10) { 
 
     return; 
 
    } 
 
    options.xAxis.min = xMinonzoom; 
 
    options.xAxis.max = xMaxonzoom; 
 
    chart.refresh(); 
 
    } 
 
} 
 

 
$(document).ready(function() { 
 
    $.ajax({ 
 
    type: "GET", 
 
    cache: true, 
 
    url: "https://api.myjson.com/bins/1uan0", 
 
    async: false 
 
    }).success(function(result) { 
 
    var dataresult = result; 
 
    $(dataresult).each(function(e, data) { 
 
     Chartdata.push({ 
 
     "date": new Date(Date.parse(data.date)), 
 
     "close": data.close, 
 
     "volume": data.volume, 
 
     "high": data.high, 
 
     "low": data.low, 
 
     "open": data.open, 
 
     "symbol": data.symbol 
 
     }); 
 
    }); 
 
    createChart(); 
 
    }); 
 
});

#chart circle { 
 
    display: none; 
 
}

<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" rel="stylesheet" /> 
 
<link href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="http://kendochart.webashlar.com/kendochart/Javascripts/kendo.all.min.js"></script> 
 

 

 
<div id="chart"></div>

谢谢

Answer 1

我创建了一个道场给你，所以希望这点你在正确的方向。

Chart Dojo

所有我已经做了一些简单的过滤加入，使得基于最小和最大缩放您选择网格只会调用这些项目到数据源的你，而不是整个数据集。

这是通过该位的代码来实现的：

var datasource = chart.dataSource; 
    console.log("DataSource Total before Filtering is:: " + datasource.total()); 
    datasource.filter(); 
    datasource.filter([{field:"date", operator:"gte",value : xMinonzoom }, {field:"date", operator: "lte", value:xMaxonzoom}]); 
    console.log("DataSource Total after Filtering is:: " + datasource.total()); 

因此，这显示了该滤波要返回回数据源上具有的影响。

如果你想进一步加快速度，你可以看看更大的数据集的分组，例如，当你第一次加载网格数据，因为那时的数据只是噪声（在我看来）并不是真的对我有意义（但可能在你的用例中）。

想象一下，映射如何处理实例缩小为数字，而不是试图显示所有单个数据点，直到您开始放大并单独查看数据。

如果您需要更多信息，请告诉我，我会扩大答案/提供更多信息，如果我可以。