Кендо Stockchart отключить масштабирование в час уровень

Я использую Кендо StockChark и у меня есть источник данных, который выглядит следующим образом:Кендо Stockchart отключить масштабирование в час уровень

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

Это ежедневный источник данных и на каждый день, он имеет соответствующее значение цены.

Проблема заключается в том, что Kendo StockChart позволяет масштабировать колесиком мыши в часах и минутах, даже если данных нет. Я должен избегать масштабирования, когда я достиг дневного уровня на графике.

График выглядит следующим образом при увеличении ИНТ часов и минут:

Как вы видите, нет никаких данных среди дней, и они остаются пустыми на графике. Я должен предотвратить масштабирование в почасовые данные, то есть не более масштабируемая сумма должна быть днями:

Я попытался перекрывая onZoom метод StockChart следующим образом:

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

В этом методе я проверить разница между минимальными и максимальными датами, и если она становится меньше одной недели, я не допускаю масштабирования. Этот метод работает, когда я медленно увеличиваю колесико мыши. Но когда я быстро масштабируюся, он по-прежнему масштабируется в часах и минутах.

Есть ли способ справиться с этой проблемой? Благодарю.

источник

2016-06-03 Faruk Yazıcı

Можете ли вы разместить свой код, который показывает использование биржевой диаграммы кендо? –

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

источник

2016-06-03 14:41:22

Я не должен избегать масштабирования. В моем случае у меня есть больший источник данных (~ 15 лет). Мне нужно включить масштабирование, пока оно не покажет каждый день. Затем масштабирование должно быть остановлено. –

Вы нашли решение для этого? – Giox

Я была такая же проблема. Для меня работала categoryAxis с baseUnit как fit и ничего не определялось для часов/минут/секунд в autoBaseUnitSteps. См. Ниже:

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

источник

2018-01-24 18:41:51 SaraTE

Кендо Stockchart отключить масштабирование в час уровень

ответ

Смежные вопросы