Диаграмма JS не работает с Phonegap

Question

Я получил динамически загруженную диаграмму, работающую в нескольких браузерах, а также на моем iPhone. Но когда я пытаюсь открыть диаграмму с телефоном на моем iPhone, холст полностью глючит.

Есть ли какие-либо известные проблемы с использованием Chart JS с Phonegap?

он должен выглядеть следующим образом:

но с 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 ИОС)

добавил границу для холста и открыл веб-сайт с помощью 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, 
    });