Question

我正在使用Kendo StockChark，我有一个如下所示的数据源：

...
{
"price": 0.010754,
"date": 1461186000000
},
{
"price": 0.010758,
"date": 1461272400000
},
{
"price": 0.010759,
"date": 1461358800000
}
...

这是每日数据源，每天都有相应的价格值。

问题是，即使没有数据，Kendo StockChart也允许使用鼠标滚轮进行小时和分钟缩放。当我达到图表上的每日水平时，我应该阻止缩放。

当缩放小时和分钟时，图表看起来像跟随：

如您所见，日期之间没有数据，它们在图表上保持为空。我应该防止缩放到每小时数据，即最大可缩放量应该是几天：

我已尝试覆盖StockChart的onZoom方法，如下所示：

vm.chartOptions.zoom = function(e) {
    if(e &&  e.sender &&   e.sender._plotArea && e.sender._plotArea.axisX  ){
        var diff = e.sender._plotArea.axisX.options.max.getTime() - e.sender._plotArea.axisX.options.min.getTime() ;
        if(diff < 24*60*60*1000*7){
            e.preventDefault();
            return false;
        }
     }
};

在这种方法中，我检查最小和最大日期之间的差异，如果它少于一周，我会阻止缩放。当我用鼠标滚轮慢慢缩放时，此方法有效。但是当我快速变焦时，它仍会缩放到几小时和几分钟。

有没有办法解决这个问题？感谢。

Answer 1

var dataForSource = [{

    date: new Date("December 16, 2013 02:06:00 AM"),
    Count: 0
  }, {
    date: new Date("December 16, 2013 02:07:00 AM"),
    Count: 1
  },

  {
    date: new Date("December 16, 2013 02:09:00 AM"),
    Count: 0
  }, {
    date: new Date("December 16, 2013 02:09:15 AM"),
    Count: -1
  },

  {
    date: new Date("December 16, 2013 02:09:45 AM"),
    Count: 0
  },


  {
    date: new Date("December 16, 2013 02:10:00 AM"),
    Count: -1
  }, {
    date: new Date("December 16, 2013 02:15:00 AM"),
    Count: 0
  }


  //Comment these out to see issue
  , {
    date: new Date("December 16, 2013 04:10:01 PM"),
    Count: -1
  }

  , {
    date: new Date("December 16, 2013 11:55:00 PM"),
    Count: 0
  }


];


var staticDataSource = new kendo.data.DataSource({
  type: "line",
  data: dataForSource
});

function createChart() {
  $("#chart").kendoStockChart({
    dataSource: staticDataSource,

    dateField: "date",

    series: [{
      type: "line",
      style: 'step',
      field: "Count",
      categoryField: "date"
    }],

    categoryAxis: {
      // Disables aggregates
      type: "category",

      labels: {
        format: "HH:mm",
        skip: 1
      }
    },

    navigator: {
      series: {
        type: "line",
        style: 'step',
        field: "Count"
      }
    },
    zoomStart: function(e) {
        e.preventDefault();
        return false;
},
    selectEnd: function(e) {
      // Filter the data source using the selection range
      console.log(e.from, e.to);
    }
  });
};


$(document).ready(createChart);

<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

<div id="chart"></div>

使用zoomStart事件来避免缩放

vm.chartOptions.zoomStart = function(e) {
    e.preventDefault();
    return false;
};

Answer 2

我有同样的问题。对我有用的是将categoryAxis定义为baseUnit为fit，并且autoBaseUnitSteps中的小时/分钟/秒没有定义。见下文：

categoryAxis: {
    baseUnit: "fit",
    majorGridLines: {
        visible: false
    },
    autoBaseUnitSteps: {
        hours: [],
        minutes: [],
        seconds: []
    }
}

Kendo Stockchart禁用缩放到小时级别

2 个答案: