Question

我正在使用appcelerator studio％.2.0 GA webView和chartjs插件行更新。

使用下面的代码，我在网络浏览器中有一个完美的视图，如Chrome（没有webview），但在Android智能手机或模拟器上它无法正常运行。在底部出现一条红线，在strokeGrid上出现双线。

有人帮忙吗？

这是代码：

使用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>

Webview无法在android中正确显示

0 个答案: