は、私の見解

でiframe内に使用されるHTMLファイルに私がは、私の見解

を解決するために、かなり複雑な状況を持っている私は外部のライブラリと私のキャンバスを表示するには、問題を抱えていたので、私はあきらめたと私はIFRAMEを使用私のビューは私のグラフを表示する。今はうまくいきます。

しかし、私は質問があります：どのように自分のoDataモデルを自分のhtmlファイルで使うことができますか？私のチャートは私のsapテーブルのデータを使うのですか？それは進化である必要がありますか、私がやった方法をお見せ

無用です：

ビュー：

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

そして、これは私の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>

お返事ありがとう：

出典

2016-06-29 Samy Le Galloudec

私はこれを行う最も簡単な方法は、バックエンドからデータを引き出し、チャートを更新するタイマーをゲームに追加することだと思います。

あなたの状況では、JQueryのgetJSON呼び出しを使用してODataサービスを読み込むだけです。これは、ODataサービスからデータを取り出すために、UI5フレームワーク全体をチャートに取り込むのに比べてはるかに軽量になります。 ODataサービスの素晴らしい点は、RESTful（ish）の動作をすることです。

あなたのような何か使用してこの問題を解決することができます：

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

をthis jsbin中（嘲笑）バージョンを確認してください。 5つの値が変化するパブリックデータプロバイダをどこに見つけるかはわかりませんでしたので、ランダムジェネレータを使用してそれを嘲笑しました。アイデアがはっきりしていることを願っています約束通りChart.jsは、カスタムコントロールに埋め込まれるように

、私は例を少し拡張してきました。このカスタムコントロールは、軸の値を変更することができるシンプルなアプリに組み込まれているため、チャートがそれに応じて変更されるはずです。ライブアプリをhttps://jpenninkhof.github.io/pentagon/に見てみましょう。

ソースはhttps://github.com/jpenninkhof/pentagon/です。 controlsディレクトリのカスタムコントロールを見つけてください。

出典

2016-06-29 14:08:40 jpenninkhof

こんにちは、お返事ありがとうございますあなたの答えは正しいと思いますが、私はこれを単独で行うことはできません。私は大企業の研修生です。私は一人ではできないものを私に求めていますが、誰も助けてくれません。私は「更新」のことを理解していると思いますが、私のデータを取得する方法について私に答えてもらえないか分かりません私はただ自分のデータを入れたいと思っています： data：["{製品> } "、{製品>"変更の可能性 "" ...] 私はsapui5の私の他のビューでやっているように –

それは本当に深くにあなたを投げたように聞こえる、吸う。とにかく、この特定のアプリでは、5つのデータポイントをキー入力するようにユーザーに指示することはできますか？それはサーバーから引き出しますか？私はそれが後者であるという印象を受けましたが、jsbinをいくつかの入力フィールドで少し改良して、どのように動作するかをより明確に理解できるようにしてください。 – jpenninkhof

イェップ、私は最初の5週間は大丈夫でしたが、そこには本当に失われています私はこれをあきらめるだろうと思っています。私はこれを見つけるのに2日もあります。） –

答えがあなたのニーズに合っているかどうかはわかりませんが、とにかく参考になるかもしれません。私の見解では、UI5アプリケーション内で外部ライブラリのカスタムUI要素を使用したい場合は、カスタムUI5コントロールでラップして通常どおりに使用する方がよいでしょう。あなたはを介してこれを達成することができます。は私の具体的な例では、私はD3jsの上にコントロールを構築し、それがこのように見えた：

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

した後、私は通常の方法でこのコントロールをインスタンス化することができましたし、ページにそれを組み込むこと：

var chart = new classname(); 
return new sap.m.Page({ 
.. 
content: [chart], 
});

私のコントロールはライブモードで更新されました。アニメーションの終わりを見て、dbに対してクエリを実行し、コントロールを再描画することでこれを実現しました（d3ではこれをサポートしています）。しかし、上記のタイマーソリューションはこの場合にはかなり良いと同意します。データセットの多くは、することができたときに、上記のすべて - 「ライブ」のシナリオのこれらの種類のデータをフェッチする

カスタムコントロールの作成examples

出典

2016-06-29 14:52:09 Shidai

私はすでにコントローラーにすべてを入れようとしましたが、キャンバスは空でした、なぜ私は本当に理由がわかりません –

最良の方法は、（ブラウザのサポート場合）のWebRTCを使用するか、ウェブソケットを使用するかであります転送中にバイナリモードを使用するとかなり小さくなります。他のすべてが失敗した場合（fail-safeメソッドとして）、setIntervalでhttp-poolingを使用します。これは実現可能な最悪のパフォーマンスです。

出典

2016-07-07 22:27:46 whoiz

答えて

関連する問題