Mit den Daten von Modell in HTML-Datei in iFrame meiner Meinung nach verwendet

ich eine ziemlich komplexen Situation zu lösen habeMit den Daten von Modell in HTML-Datei in iFrame meiner Meinung nach verwendet

hatte ich Probleme meine Leinwand mit einer externen Bibliothek angezeigt werden, so gab ich auf und ich verwenden, um ein iframe in Meine Ansicht, um mein Diagramm anzuzeigen. Jetzt funktioniert es gut.

Aber jetzt habe ich eine Frage: Wie kann ich mein oData-Modell in meiner HTML-Datei verwenden, für mein Diagramm verwenden Sie die Daten aus meiner SAP-Tabelle? Es muss evolutive oder es ist nutzlos

ich Ihnen zeigen, wie ich tat:

Ausblick:

<!DOCTYPE xml> 
<mvc:View controllerName="Metrology.controllers.Pentagone" xmlns="sap.m" 
xmlns:layout="sap.ui.layout" 
xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml"> 
<html:iframe src="app/utils/testpentagone.html" height="1300" width="900"></html:iframe> 
</mvc:View>

Und das ist der Code meiner pentagone:

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" /> 
    <meta charset="UTF-8" > 

    <title>SAPUI5</title> 
    <script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> 
</head> 
<body> 
<canvas id="radarChart" width="900" height="600"></canvas> 
</body> 
    <script> 
var radarData = { 
       labels : ["Performance","Security","Robustness","Changeability","Transferability"], 
       datasets : [ 
        { 
         fillColor: "rgba(102,45,145,.1)", 
         strokeColor: "rgba(102,45,145,1)", 
         pointColor : "rgba(220,220,220,1)", 
         pointStrokeColor : "#fff", 
         data : [4,3,2,1.5,3] 
        }, 
        { 
         fillColor: "rgba(63,169,245,.1)", 
         strokeColor: "rgba(63,169,245,1)", 
         pointColor : "rgba(151,187,205,1)", 
         pointStrokeColor : "#fff", 
         data : [3,3,3,3,3] 
        } 
       ] 
      } 
      //Create Radar chart 
      var pentagone = document.getElementById("radarChart").getContext("2d"); 
      var myNewChart = new Chart(pentagone).Radar(radarData); 
</script>

Danke für die Antworten :)

Quelle

2016-06-29 Samy Le Galloudec

Ich denke, der einfachste Weg ist, dem Spiel einen Timer hinzuzufügen, der ab und zu Daten aus dem Back-End zieht und das Diagramm aktualisiert.

In Ihrer Situation würde ich gerade den OData-Service mit JQuery getJSON Anruf lesen. Dies wäre von viel geringerem Gewicht verglichen mit dem Ziehen des gesamten UI5-Frameworks in Ihr Diagramm, nur um Daten aus einem OData-Service zu ziehen. Das Schöne an OData-Diensten ist, dass sie sich ziemlich RESTful (ish) verhalten.

Sie könnten diese mit so etwas wie lösen:

window.setInterval(function() { 
    $.getJSON("service/odata.svc/Entities('id123')", function(data) { 
     myNewChart.datasets[0].points = data; 
     myNewChart.update(); 
    }); 
}, 1000);

finden Sie eine (verspottete) Version in this jsbin. Da ich nicht wirklich sicher war, wo ich einen öffentlichen Datenprovider mit 5 wechselnden Werten finden konnte, habe ich es mit einem Zufallsgenerator verspottet. Ich hoffe, dass die Idee klar ist.

Wie versprochen, habe ich das Beispiel ein wenig erweitert, so dass Chart.js in einem benutzerdefinierten Steuerelement eingebettet ist. Dieses benutzerdefinierte Steuerelement ist in eine einfache App eingebettet, mit der Sie die Achsenwerte ändern können, wodurch sich das Diagramm entsprechend ändern sollte. Sehen Sie sich die Live-App unter https://jpenninkhof.github.io/pentagon/ an.

Quellen sind hier: https://github.com/jpenninkhof/pentagon/. Sie finden das benutzerdefinierte Steuerelement im Verzeichnis controls.

Quelle

2016-06-29 14:08:40 jpenninkhof

Hallo, vielen Dank für Ihre Antwort Ich denke, dass Ihre Antwort richtig ist, aber Scheiße, ich bin nicht in der Lage, dies allein zu tun. Ich bin Auszubildende in einer großen Firma, sie fragen mich, was ich nicht alleine machen kann, aber niemand kann mir helfen. Ich glaube, ich habe die "update" -Dinge verstanden, aber ich bin mir nicht sicher, ob Sie mir geantwortet haben, wie ich meine Daten bekommen kann Ich möchte nur meine Daten eingeben: daten: ["{products> Security } ", {products>" Veränderbarkeit} "...] Wie ich in meinen anderen Ansichten in sapui5 –

Das saugt, klingt, als ob sie dich wirklich in die Tiefe geworfen haben. Wie auch immer, für diese spezielle App, ist es Ihre Absicht, den Benutzer 5 Datenpunkte einzugeben, werden Sie sie von einem Server ziehen. Ich hatte den Eindruck, dass es Letzteres war, aber es macht nichts, das Jsbin mit ein paar Eingabefeldern ein wenig zu verbessern, damit man eine bessere Vorstellung davon bekommt, wie es funktionieren könnte. – jpenninkhof

Yeap, mir ging es gut die 5 ersten Wochen, aber da bin ich wirklich verloren Ich denke, ich werde dafür aufgeben, ich habe noch 2 Tage, um das zu finden, um das Dokument zu machen .. also danke für den Versuch zu helfen:) –

Ich bin mir nicht sicher, ob meine Antwort Ihren Bedürfnissen entspricht, aber trotzdem könnte es hilfreich sein. Wenn Sie einige benutzerdefinierte UI-Elemente aus externen Bibliotheken in der UI5-App verwenden möchten, ist es besser, sie in benutzerdefinierte UI5-Steuerelemente einzufügen und sie dann wie gewohnt zu verwenden. Sie können dies durch extend erreichen. In meinem speziellen Beispiel war ich Gebäudesteuerung auf der D3js, und es sah wie folgt aus:

jQuery.sap.require("sap/ui/thirdparty/d3"); 
jQuery.sap.declare("className"); 
sap.ui.core.Control.extend("className", { 
init:... 
renderer:... 
onAfterRendering:... 
...}

Nach, dass ich konnte diese Kontrolle in üblicher Weise instanziieren und betten es in eine Seite:

Meine Steuerung wurde in einem Live-Modus aktualisiert, und ich erreichte dies, indem ich das Ende der Animation beobachtete und die Abfrage an db abrief und das Steuerelement erneut zeichnete (d3 unterstützt dies). Aber stimme auch zu, dass die oben beschriebene Timer-Lösung für diesen Fall ziemlich gut ist.

Custom Control Schöpfung examples

Quelle

2016-06-29 14:52:09 Shidai

Ich habe schon versucht, alles in meinen Controller zu legen, aber die Leinwand war leer, ich weiß nicht wirklich warum –

bester Weg, um Daten in dieser Art von „live“ Szenarien zu holen ist entweder WebRTC verwenden (wenn Ihre Browser-Unterstützung) oder die Nutzung Web-Sockets - vor allem, wenn viele Dataset sein kann viel kleiner, wenn Sie den binären Modus während der Übertragung verwenden. Verwenden Sie http-pooling mit setInterval nur, wenn alles andere fehlschlägt (als ausfallsichere Methode) - es ist die schlechteste mögliche Leistung, die Sie jemals erreichen können.

Quelle

2016-07-07 22:27:46 whoiz

Mit den Daten von Modell in HTML-Datei in iFrame meiner Meinung nach verwendet

Antwort

Verwandte Themen