Ergebnis 1 bis 2 von 2
  1. #1
    Lukas308 ist offline Grünschnabel
    registriert
    19-01-2017
    Beiträge
    1

    Webapp mit Phonegap und Chart JS Problem

    Moin Leute,

    ich hab mich hier extra angemeldet, weil ich ein Problem habe und einfach nicht weiterkomme.
    Ich habe keine Ahnung, ob ich hier an der richtigen Stelle bin, aber ich würde es dennoch gerne versuchen.

    Mein Problem ist folgendes:
    Ich habe einen mit Hilfe von Javascript erstellten Graph (ChartJS) der mir 10 Werte ausgibt.
    Soweit so gut. Rufe ich diese Website am PC oder iPhone via Firefox, Chrome, Safari or whatelse auf, funktionierts einwandfrei.
    Implementiere ich diese Website allerdings in Phonegap und starte die erstellte App auf meinem iPhone wird das Canvas total zusammengedrückt.

    Hier ein paar Codezeilen und ein paar Bilder zum besseren Verständnis:

    HTML:
    Code:
    <div id="temp_graph" style="display:none;">
    <h2 id="tmp_label"></h2>
    <canvas id="myChart"></canvas>
    CSS:
    Code:
    #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:
    Code:
    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,
    });
    Bild links: so sieht es in der App aus.
    Bild rechts: so soll es aussehen und so sieht es auch aus, wenn ich lediglich die Website aufrufe ohne Phonegap.
    ios_ChartJS_Bug1 - Kopie.PNGios_ChartJS_Bug2 - Kopie.PNG

    Vielen Dank im Voraus

    - - - Aktualisiert - - -

    Ich konnte das Problem nach tagelanger Fehlersuche nun doch selbst beheben.
    Es lag schlussendlich daran:
    Code:
    <div id="temp_graph" style="display:none;">
    Ich habe erst am Ende meiner Javascript Funktion die DIV auf display = inherit gesetzt.
    Jetzt setze ich die DIV direkt am Anfang der Funktion auf inherit und siehe da es funktioniert =)

    Thread kann geschlossen werden, ich weiß nicht wie es funktioniert ^^
    Geändert von mikdoe (20-01-2017 um 13:45 Uhr) Grund: Gelöst gesetzt

  2. #2
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.643

    AW: Webapp mit Phonegap und Chart JS Problem

    danke dass du die lösung noch gezeigt hast.
    mit deiner konstellation scheint hier sonst keiner erfahrung zu haben.

    gelöst setzen können user nicht, hab ich gemacht
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png
    Sorry wenn ich manchmal ohne Hallo und nur klein schreibe! Dann bin ich nicht unfreundlich sondern mit nervigem kleinem Touch Tablet zugange

Ähnliche Themen

  1. [FRAGE] PhoneGap
    Von Marddä im Forum Allgemeines
    Antworten: 4
    Letzter Beitrag: 17-02-2014, 11:44
  2. [Chart.js]Problem mit der Einbindung
    Von lucax im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 22-10-2013, 22:37
  3. WebApp und javascript einbinden
    Von Haxy123 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 22-07-2013, 15:11
  4. searchfield in iPhone WebApp
    Von yukuza im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 24-01-2010, 15:30
  5. WebApp in ein DIV per AJAX laden?
    Von yss im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 13-02-2009, 23:38

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •