Ich arbeite an einem Projekt mit KendoUI für HTML5. Ich habe einen Fehler im Diagramm-Widget bemerkt, wo setOptions() nicht die ganze Zeit funktioniert. Hier ist das Snippet, um den Fehler neu zu erstellen.Chart.setOptions() Fehler in Kendo UI
Grundsätzlich oben Schnipsel erstellen Sie ein Diagramm mit einigen zufälligen Daten. Ich habe auch eine Checkbox, wo Benutzer Zoomen und Schwenken auf Diagramm aktivieren/deaktivieren können. Das anfänglich erstellte Diagramm hat kein zoombares/pannbares Set.
Siehe in Aktion:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/bar-charts/pan-and-zoom">
<style>
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="box wide">
<input type="checkbox" id="eq1" class="k-checkbox">
<label class="k-checkbox-label" for="eq1">Enable Zoom</label>
<p id="para">Use SHIFT + Mouse Drag Region Selection combination on mouse-enabled devices to zoom in data for a specific period of time</p>
</div>
<div class="demo-section k-content wide">
<div id="chart"></div>
<div id="log" style="
height: 120px;
overflow: scroll;
padding: 20px;
border: 1px solid black;">
</div>
</div>
<script>
// Sample data
var data = [];
for (var i = 0; i < 50; i++) {
var val = Math.round(Math.random() * 10);
data.push({
category: "C" + i,
value: val
});
}
function createChart() {
$("#chart").kendoChart({
renderAs: "canvas",
dataSource: {
data: data
},
categoryAxis: {
min: 0,
max: 10,
labels: {
rotation: "auto"
}
},
series: [{
type: "column",
field: "value",
categoryField: "category"
}]
});
}
$(document).ready(createChart);
$("#example").bind("kendo:skinChange", createChart);
$("#eq1").click(function(e) {
if (this.checked) {
setZoom({
pannable: {
lock: "y"
},
zoomable: {
mousewheel: {
lock: "y"
},
selection: {
lock: "y"
}
}
});
} else {
setZoom({
pannable: false,
zoomable: false
});
}
});
function setZoom(obj) {
try {
$("#chart").data("kendoChart").setOptions(obj);
} catch (ex) {
$('#log').append($('<div/>').text("Error : " + ex.message + "\n" + ex.stack + "\n"));
}
}
</script>
</div>
</body>
</html>On Benutzer mit Ankreuzfeld (oben links), und zoombar pannable Eigenschaften des Diagramms unter Verwendung chart.setOptions eingestellt wird interagiert() Methode erhältlich der Rahmen. Wenn das "Code-Snippet ausführen" nicht funktioniert, führen Sie die folgenden Schritte aus. Sie können den Fehler in Aktion sehen.
Schritt 1: Kopieren Sie das obige Snippet in den Editor unter http://dojo.telerik.com/ Schritt 2: Führen Sie den Code aus. (Ein Diagramm wird als Ergebnis erstellt)
Schritt 3: Aktivieren Sie das Kontrollkästchen, um den Zoom für das Diagramm zu aktivieren. (zoombare und pannable Eigenschaften setzt auf x-Achse, so dass Diagramm jetzt zoomable und pannable sein kann)
Schritt 4: Deaktivieren Sie das Kontrollkästchen, um den Zoom für Diagramm zu deaktivieren. (pannable wird deaktiviert, aber das Diagramm kann immer noch zoombar sein. - Dies ist der Fehler)
Schritt 5: Aktivieren Sie das Kontrollkästchen erneut und Sie werden den Fehler sehen, der unter dem Diagramm angezeigt wird.
Wenn jemand weiß, wie man das löst. Wenn dies der Bug mit KendoUI ist, hoffe ich, dass das Kendo-Entwicklerteam das bekommt.
Dank Glen, das ist möglich Abhilfe. Aber es funktioniert nur, wenn ich NUR X-Achse oder NUR Y-Achse sperren möchte. Jetzt habe ich ein Problem, bei dem sowohl die x-Achse als auch die y-Achse gezoomt und geschwenkt werden soll! Aus diesem Grund möchte ich die Methode setOptions() verwenden, die im Diagramm-Widget verfügbar ist. Ich möchte nur dem Benutzer eine Flexibilität geben, so dass der Benutzer folgende Schritte ausführen kann: a) Zoom x Achse, b) Zoom y Achse c) Zoom x und y Achse, d) Zoom auf der x und y Achse deaktivieren. Wie erreiche ich das? – Vinnie
Es scheint, der Fehler, den wir bekommen, liegt daran, pannable oder zoomable auf false, so meinen "Hack", um Standardaktion zu verhindern, wenn Sie Pan/Zoom deaktivieren möchten Ich kann die Optionen des Diagramms wie ändern: theChart.options.pannable.lock = "x"; Ich werde ein funktionierendes Code-Snippet als Antwort veröffentlichen. –
Das ist großartig, funktioniert perfekt. Vielen Dank. :) – Vinnie