Kendo Stockchart deaktivieren Zoomen in Stunden Ebene

Question

ich Kendo StockChark verwende und ich habe eine Datenquelle, die wie folgt aussieht:

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

Es ist eine tägliche Datenquelle und für jeden Tag, hat es einen entsprechenden Preiswert.

Das Problem ist, Kendo StockChart ermöglicht Zoomen mit dem Mausrad in Stunden und Minuten, obwohl keine Daten vorhanden sind. Ich sollte Zoomen verhindern, wenn ich das Tagesniveau im Diagramm erreicht habe.

Die Grafik sieht wie folgt aus, wenn gezoomt int Stunden und Minuten:

Wie Sie sehen, gibt es keine Daten unter Tage ist und sie bleiben auf der Grafik leer. Ich sollte verhindern, dass in Stündliche Zoomen, dh max zoombaren Betrag sollte Tage:

Ich habe versucht, Methode der StockChart zwingende onZoom wie folgt:

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

Bei diesem Verfahren, überprüfe ich die Unterschied zwischen den Min- und Max-Daten, und wenn es weniger als eine Woche wird, verhindere ich Zoomen. Diese Methode funktioniert, wenn ich langsam mit dem Mausrad zoome. Aber wenn ich schnell zoome, zoomt es immer noch in Stunden und Minuten.

Gibt es eine Möglichkeit, mit diesem Problem umzugehen? Vielen Dank.

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>

Verwendung zoomStart Ereignis

Zoomen zu vermeiden

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

Answer 2

ich hatte das gleiche Problem. Was für mich funktionierte war das Definieren der categoryAxis mit baseUnit als fit und nichts definiert für die Stunden/Minuten/Sekunden in autoBaseUnitSteps. Siehe unten:

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