Chart JSはPhonegapと連携していません

Question

ダイナミックに読み込まれたChartは、いくつかのブラウザと私のiPhoneで動作しています。しかし、iPhoneでphonegapでチャートを開こうとすると、キャンバスは完全にバグです。

PhonegapでChart JSを使用する際の既知の問題はありますか？

それは次のようになります。

が、PhoneGapのと、それは次のようになります。

HTML：

<div id="temp_graph" style="display:none;"> 
<h2 id="tmp_label"></h2> 
<canvas id="myChart"></canvas> 

CSS：

#temp_graph { 
margin-top: 5%; 
width: 90%; 
background-color: #fff; 
display: inline-block; 
padding: 2%; 
box-shadow: 0 0 10px 0 rgba(0, 0, 58, 0.05); 
} 

の

JS：

var temp_graph_div = document.getElementById('temp_graph'); 

var canvas = document.getElementById('myChart'), 
    ctx = canvas.getContext('2d'), 
    startingData = { 
     labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]], 
     datasets: [{ 
       label: '°C', 
       fill: false, 
       lineTension: 0.1, 
       backgroundColor: "rgba(255, 205, 200,0.4)", 
       borderColor: "rgba(255, 205, 200,1)", 
       borderCapStyle: 'butt', 
       borderDash: [], 
       borderDashOffset: 0.0, 
       borderJoinStyle: 'miter', 
       pointBorderColor: "rgba(75,192,192,1)", 
       pointBackgroundColor: "#fff", 
       pointBorderWidth: 1, 
       pointHoverRadius: 5, 
       pointHoverBackgroundColor: "rgba(75,192,192,1)", 
       pointHoverBorderColor: "rgba(220,220,220,1)", 
       pointHoverBorderWidth: 2, 
       pointRadius: 1, 
       pointHitRadius: 10, 
       responsive: true, 
       maintainAspectRatio: true, 
       data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]] 
      }] 
    }; 

var myChart = new Chart(ctx, { 
    type: 'line', 
    data: startingData, 
}); 


temp_graph_div.style.display = 'inherit'; 

任意のアイデア？

EDIT： はキャンバスの境界線を追加して、ブラウザ（SafariのIOS）を介してウェブサイトを開設し

は、キャンバスの境界線を追加し、PhoneGapの

を経由してウェブサイトを開設することのように思えます幅は正しくありませんが、同じモバイルデバイスの幅が異なる理由は何ですか？私は=問題を解決することができ

Answer 1

） 問題は、グラフを作成した後のdiv

temp_graph_div.style.display = 'inherit'; 

を設定することによって引き起こされました。

は今、私のコードは、この（なし大きな変化はなく、大成功）のようになります。

 var temp_graph_div = document.getElementById('temp_graph'); 
    temp_graph_div.style.display = 'inherit'; 

    var canvas = document.getElementById('myChart'), 
     ctx = canvas.getContext('2d'), 
     startingData = { 
      labels: [tempValues[9][3], tempValues[8][3], tempValues[7][3], tempValues[6][3], tempValues[5][3], tempValues[4][3], tempValues[3][3], tempValues[2][3], tempValues[1][3], tempValues[0][3]], 
      datasets: [{ 
        label: '°C', 
        fill: false, 
        lineTension: 0.1, 
        backgroundColor: "rgba(255, 205, 200,0.4)", 
        borderColor: "rgba(255, 205, 200,1)", 
        borderCapStyle: 'butt', 
        borderDash: [], 
        borderDashOffset: 0.0, 
        borderJoinStyle: 'miter', 
        pointBorderColor: "rgba(75,192,192,1)", 
        pointBackgroundColor: "#fff", 
        pointBorderWidth: 1, 
        pointHoverRadius: 5, 
        pointHoverBackgroundColor: "rgba(75,192,192,1)", 
        pointHoverBorderColor: "rgba(220,220,220,1)", 
        pointHoverBorderWidth: 2, 
        pointRadius: 1, 
        pointHitRadius: 10, 
        responsive: true, 
        maintainAspectRatio: true, 
        data: [tempValues[9][6], tempValues[8][6], tempValues[7][6], tempValues[6][6], tempValues[5][6], tempValues[4][6], tempValues[3][6], tempValues[2][6], tempValues[1][6], tempValues[0][6]] 
       }] 
     }; 


    var myChart = new Chart(ctx, { 
     type: 'line', 
     data: startingData, 
    });