2016-04-01 16 views
0

appceleratorスタジオ%.2.0 GA webView with chartjsプラグインラインアップデートを使用しています。webviewがアンドロイドで正しく表示されない

以下のコードでは、Chrome(ウェブビューなし)のようなWebブラウザで完璧な表示ができますが、Androidスマートフォンやエミュレータでは正しく動作しません。下部に赤い線が表示され、strokeGridに二重線が表示されます。

誰かが助けてくれますか?

これはコードです:あなたは、アンドロイドの古いバージョンのためのWebViewを構築している場合

Javascript-

var count = 0; 

// 
// create base UI tab and root window 
// 
var win = Titanium.UI.createWindow({ 
title:'BtTest', 
backgroundColor:'#eff2d8', 
    layout: 'vertical' 
}); 

var mainView = Ti.UI.createView({ 
    top: 0, 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE, 
    backgroundColor: '#7cd0F7', 
}); 

var webView = Ti.UI.createWebView({ 
    backgroundColor: '#F0F8FF', 
    top:100, 
    left: 0, 
    height: Ti.UI.FILL, 
    width: Ti.UI.FILL, 
    cacheMode: Ti.UI.Android.WEBVIEW_LOAD_NO_CACHE, 
    borderColor: 'black', 
    url: 'html/lineChart.html' 
}); 
mainView.add(webView); 

function send(value) 
{ 
    Ti.App.fireEvent("app:fromChart", {message: value}); 
    Ti.API.info('Sent: ', value); 
    count ++; 
    Ti.API.info("Count: " + count); 
} 

function interval() 
{ 
    setInterval(function() 
    { 
     send(Math.floor(Math.random() * 100)); 
}, 500); 
} 

interval(); 
win.add(mainView); 
win.open(); 

HTML-

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src="../js/Chart.min.js"></script> 
</head> 
<body> 
<canvas id="updating-chart" width="320" height="220"> </canvas> 
<script> 
    var N = 20; 
    var zero_array = []; 

    for (i = 0; i < N; i++) 
    zero_array.push(""); 

    var canvas = document.getElementById('updating-chart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
    labels: zero_array, 
    datasets: [ 
    { 
     strokeColor: "rgba(255,0,0,1)", 
     data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] 
    }] 
    }, 
    latestLabel = startingData.labels[0]; 
    var lineOptions = { 
    bezierCurve: false, 
    scaleOverlay : false, 
    scaleOverride : false, 
    scaleSteps : null, 
    scaleStepWidth : null, 
    scaleStartValue : null, 
    scaleLineColor : "rgba(0,0,0,1)", 
    scaleLineWidth : 1, 
    scaleShowLabels : true, 
    scaleLabel : "<%=value%>", 
    scaleFontFamily : "'Arial'", 
    scaleFontSize : 12, 
    scaleFontStyle : "normal", 
    scaleFontColor : "#666", 
    scaleShowGridLines : true, 
    scaleGridLineColor : "rgba(0,0,0,1)", 
    scaleGridLineWidth : 1, 
    pointDot : true, 
    pointDotRadius : 0, 
    pointDotStrokeWidth : 1, 
    datasetStroke : true, 
    datasetStrokeWidth : 2, 
    datasetFill : false, 
    animation : false, 
    responsive: false, 
    maintainAspectRatio: true 
    }; 

// We wait for everything to be loaded 
window.onload = function main() 
{ 
    // Get the context of the canvas 
    var ctx = document.getElementById("line_example").getContext("2d"); 
    // Create the Chart object 
    var line_example_chart = new Chart(ctx).Line(data,lineOptions); 
    // Used for the labels on the X axis 
    var label_idx = 1; 
    Ti.App.addEventListener("app:fromChart", function(e) 
    { 
     var msg = e.message;  
     if(msg == 0) msg = 1;   
     line_example_chart.removeData(); 
     line_example_chart.addData([msg], label_idx++);     
    }); 
    window(); 
}; 
</script> 

+0

あなたがバグを見つけたようです。ありがとう!これが[Appcelerator JIRA](https://jira.appcelerator.org/)の既知の問題であるかどうかを確認してください。そうでない場合は、チケットを作成してこの質問にリンクするだけでなく、チケット自体に再現可能なコード、ステップ、環境情報を提供してください。他の人があなたと一緒に見ることができるように、ここにチケットへのリンクをドロップすることを忘れないでください。 –

答えて

0

AppceleratorはChromiumベースではありませんでした。少し違う。あなたはそれについての詳細を読むことができますhere

AppceleratorのためのWebViewのドキュメントからの引用:

アンドロイド4.4(APIレベル19)以降は、WebViewのコンポーネントは、そのレンダリングエンジンへの変更の数を導入し、クロムのオフに基づいています。 AndroidのバージョンによってWebコンテンツが異なるように見えたり、動作が異なる場合があります。 WebViewには、Chrome for Androidとの完全な機能パリティがありません。

+0

Jacobに感謝します。私はアンドロイドバージョン6.0 APIを使用しています23.外部への参照を変更しようとしましたが、結果は同じでした。 – user2355811

関連する問題