Question

我正在研究剑道图表。我正在图表上加载30k数据。您可以在我附加的代码中看到，当我使用鼠标滚动放大和缩小时，过程变得非常慢。是否可以减少每个进程的执行时间？而且第一次加载图表也很慢。

我想知道应该加载剑道图表上的30k数据吗？剑道为图表上的数据加载设置了限制吗？

＆＃13;

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

＆＃13;

#chart circle {
  display: none;
}

＆＃13;

<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>

＆＃13;

谢谢

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

因此，这会向您显示过滤对您要返回的数据源的影响。

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

考虑映射如何与缩小的实例一起汇总为数字，而不是尝试显示所有单个数据点，直到您开始放大并单独查看数据。

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

剑道图表性能问题

1 个答案: