Visualizzazione dei risultati da 1 a 3 su 3
  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2013
    Messaggi
    28

    Problema nella visualizzazione di più grafici nella stessa pagina

    Ciao a tutti,

    Ho un problema con Javascript. In sostanza io ho trovato questo sito dove da la possibilità di creare grafici in maniera molto molto semplice! Però purtoppo non riesco a mettere più grafici diversi uno sotto l'altro perché mi vede solo il primo grafico e non capisco come mai...
    Per cercare di spiegarmi il meglio possibile vi metto il codice della pagina che sto cercando di creare:

    codice:
    			<section class="ac-container">
    				<div>
    					<input id="ac-1" name="accordion-1" type="checkbox" checked />
    					<label for="ac-1">Intestazione</label>
    					<article class="ac-info">
    						
    
    Testo intestazione</p>							
    					</article>
    				</div>
    				<div>
    					<input id="ac-2" name="accordion-1" type="checkbox" />
    					<label for="ac-2">Grafici</label>
    					<article id="do" class="ac-ms">
    
    
    Grafico numero uno</p>
    <canvas id="uno" height="100" width="400"></canvas>
    <script>
    var lineChartData = {
    labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
    datasets : [
    {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,1)",
    pointColor : "rgba(151,187,205,1)",
    pointStrokeColor : "#fff",
    data : [0,0,0,1,0,1,1,0,0,0,1]
    }
    ]
    }
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    </script>
    
    
    
    Grafico numero due</p>
    <canvas id="due" height="100" width="400"></canvas>
    <script>
    var lineChartData = {
    labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
    datasets : [
    {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,1)",
    pointColor : "rgba(151,187,205,1)",
    pointStrokeColor : "#fff",
    data : [0,0,0,1,0,1,1,0,0,0,1]
    }
    ]
    }
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    </script>
    
    
    
    Grafico numero tre</p>
    <canvas id="tre" height="100" width="400"></canvas>
    <script>
    var lineChartData = {
    labels : ["13.00 AM","13.01 AM","13.02 AM","13.03 AM","13.04 AM","13.05 AM","13.06 AM","13.07 AM","13.08 AM","13.09 AM","13.10 AM"],
    datasets : [
    {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,1)",
    pointColor : "rgba(151,187,205,1)",
    pointStrokeColor : "#fff",
    data : [0,0,0,1,0,1,1,0,0,0,1]
    }
    ]
    }
    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    </script>
    					</article>
    				</div>
    				<div>
    					<input id="ac-3" name="accordion-1" type="checkbox" />
    					<label for="ac-3">Secondo Paragrafo</label>
    					<article id="do" class="ac-ms">
    					
    
    Testo</p>
    					</article>
    				</div>
    				<div>
    					<input id="ac-4" name="accordion-1" type="checkbox" />
    					<label for="ac-4">Terzo Paragrafo</label>
    					<article id="do" class="ac-ms">
    					
    
    Testo</p>
    					</article>
    				</div>
    			</section>
            </div>
    I tre grafici sono assolutamente identici, cambierebbero poi solo i dati, però il primo lo vede correttamente, il secondo e il terzo non si vedono! Si vede solo la scritta "Grafico numero due" e "Grafico numero tre", tra queste due scritte c'è poi 'del vuoto' nel mezzo che aumenta o diminuisce a seconda di quanto faccia grosso il grafico!
    Io è tutta la mattina che provo a capire qual'è il problema...

    Grazie mille :)

  2. #2
    Moderatore di JavaScript L'avatar di br1
    Registrato dal
    Jul 1999
    Messaggi
    19,998
    Devi usare l'ID corretto per disegnare le diverse immagini ...

    var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData);
    Il guaio per i poveri computers e' che sono gli uomini a comandarli.

    Attenzione ai titoli delle discussioni: (ri)leggete il regolamento
    Consultate la discussione in rilievo: script / discussioni utili
    Usate la funzione di Ricerca del Forum

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2013
    Messaggi
    28
    Grazie mille ora va tutto

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.