Partage
  • Partager sur Facebook
  • Partager sur Twitter

Chart JS question d'axe Y

Comment choisir son échelle sur un axe sur ChartJS

Sujet résolu
    2 juillet 2022 à 11:37:30

    Bonjour, j'ai une petite question sur le paramétrage de Chart JS !

    J'ai un graphique qui doit afficher 0 ou 1 en mode bar mais l'échelle des Y est du coup divisée en 0,1 je voudrais juste 0 ou 1.

    Voici le code (enfin une partie car sinon une fois de plus openclassroom ne me laisse pas le mettre...):



      const config4 = {
        type: 'bar',		// type de graphisme barre
        data:data4,
    	
       options: {
    		aspectRatio: 2,		//rapport entre la hauteur et la largueur 1= carré, 0.5 être deux fois plus haut que large
    						//2 être deux fois plus large que haut
       		        plugins: {
    		title: {					// titre graphisme
                    display: true,
                    text: 'Pluie'
    				},	//fin du titre
                subtitle: 	{			// sous titre graphisme
                    display: true,
                    text:  'Ruche N°<?=$NumRuche?>'
    						},	// fin du sous titre
          },			// fin des plugins
    
     responsive: true,
    maintainAspectRatio: true,
        scales: {			// les axes
          x: {				// Axe X
            display: true,	// autorise l'affichage d'un texte pour l'axe X
            title: {
              display: true,
              text: 'Date/heure',		// titre de l'axe X
              color: '#911',		// couleur de l'axe X
              font: {				// police de caractére de l'axe X
                family: 'Comic Sans MS',
                size: 20,			// taille des caractères de l'axe X
                weight: 'bold',		// écriture en gras
                lineHeight: 1,
    				},	// fin de la police de caractére des X
              padding: {top: 10, left: 0, right: 0, bottom: 0}		// position de l'axe X
    				}	// fin du titre X
    		},	// fin de l'axe X
          y: {
            display: true,
            title: {
              display: true,
              text: 'Pluie = 1',				// titre de l'axe Y
              color: '#191',			// couleur de l'axe Y
              font: {					// police de caractére de l'axe Y
                family: 'Times',
                size: 20,
                style: 'normal',
                lineHeight: 1.2
    				}, // fin de la police de caractére des Y
              padding: {top: 30, left: 0, right: 0, bottom: 0}		// position de l'axe Y
    				}	// fin du titre Y
    
    			}	//fin de l'axe Y
    
    					} //fin des echelles
    					
    				}	// fin des options
    				
    			};	//fin de config4



    et voici le rendu actuel:

    Comment donc changer l'échelle automatique de l'axe Y? pour n'afficher que le 0 en bas et le 1 en haut?

    Merci

    -
    Edité par GillesMangin-Voirin 2 juillet 2022 à 11:42:18

    • Partager sur Facebook
    • Partager sur Twitter
      1 août 2022 à 21:32:51

      J'ai fini par trouvé... si cela intéresse quelqu'un voici le code

      y: {
      		display: true,
      		min:0,
                      max:1,
      		ticks: {																
      		stepSize: 1	// force l'echelle à une unitée 
      			},
      		title: {
      		display: true,
      																	text: 'Pluie = 1',				// titre de l'axe Y
      																	color: '#191',			// couleur de l'axe Y
      																	font: {					// police de caractère de l'axe Y
      																		family: 'Times',
      																		size: 20,
      																		style: 'normal',
      																		lineHeight: 1.2
      																	}, // fin de la police de caractère des Y
      																padding: {top: 30, left: 0, right: 0, bottom: 0}		// position de l'axe Y
      																}	// fin du titre Y
      
      															}	//fin de l'axe Y

      rajout de : 

      min:0,

      max:1,

      ticks: {

       stepSize: 1// force l'echelle à une unitée 

      },

      Voilà

      A+

      -
      Edité par GillesMangin-Voirin 1 août 2022 à 21:34:08

      • Partager sur Facebook
      • Partager sur Twitter

      Chart JS question d'axe Y

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown