剑道 Stockchart 禁用放大到小时级别

Posted 2023-05-07

【中文标题】剑道 Stockchart 禁用放大到小时级别

【英文标题】：Kendo Stockchart disable zooming into hour level

【发布时间】：2016-10-03 10:14:38

【问题描述】：

我正在使用 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;
        
     
;

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

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

【问题讨论】：

你能发布你的代码来显示剑道股票图表的使用情况吗？

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

我不应该避免缩放。就我而言，我有一个更大的数据源（约 15 年）。我必须启用缩放，直到它显示每一天。然后应该停止缩放。

你找到解决方案了吗？