劍道圖表現問題

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()); 

因此，這顯示了該濾波要返回回數據源上具有的影響。

如果你想進一步加快速度，你可以看看更大的數據集的分組，例如，當你第一次加載網格數據，因爲那時的數據只是噪聲（在我看來）並不是真的對我有意義（但可能在你的用例中）。

想象一下，映射如何處理實例縮小爲數字，而不是試圖顯示所有單個數據點，直到您開始放大並單獨查看數據。

如果您需要更多信息，請告訴我，我會擴大答案/提供更多信息，如果我可以。