Comment puis-je ajouter un remplissage entre les étiquettes de graduation?

Comment ajouter un remplissage entre les étiquettes de graphique. J'ai besoin des étiquettes de tiques pour toujours montrer mais comment j'ajoute l'espacement entre les étiquettes de tique?Comment puis-je ajouter un remplissage entre les étiquettes de graduation?

Une autre solution possible serait de faire en sorte que le graphique ait une plus grande hauteur. Cela se produit uniquement lorsque vous réduisez le graphique à la taille du navigateur à moins de 320 px de largeur.

Voici le violon: https://jsfiddle.net/leetcat/4d7juow3/

Dans mon cas, les étiquettes sont "en bonne santé", "réagir", "blessé", "malade."

J'ai essayé:

options: { 
    layout: { 
     padding: { 
     top: 20 
     } 
    } 
}

scales: { 
    yAxes: [{ 
    ticks: { 
     padding: 10 
    } 
    }] 
}

Source

2017-10-02 Whitecat

si vous optez pour la plus grande option de hauteur, une façon de le faire est réglage de la hauteur de la toile après le tableau rend, comme ceci: « ChartCanvas.attr (« hauteur », 400) " –

@ LeonardoCabré Un problème avec le réglage de l'ensemble de la toile est alors ce n'est pas aussi dynamique. Cela devrait également apparaître sur les tablettes. Je l'ai également ajouté au violon aucun changement. https://jsfiddle.net/leetcat/4d7juow3/4/ – Whitecat

désolé le code que j'ai écrit est jquery, sorcière n'est pas inclus dans le violon, pour le tester, vous devez inclure la bibliothèque jquery et changer var ctx = document.getElementById (" myChart "); pour var ctx = $ ("# myChart") ;, puis ctx.attr ('height', 400); –

Vous pouvez ajouter maintainAspectRatio: false aux options graphiques, et définir un min-height sur l'élément graphique.

var ctx = document.getElementById("myChart"); 
 

 
var data = { 
 
    labels: ["2017-09-26T00:00:00Z", "2017-09-27T00:00:00Z", "2017-09-28T00:00:00Z", "2017-09-29T00:00:00Z", "2017-09-30T00:00:00Z", "2017-10-01T00:00:00Z", "2017-10-02T00:00:00Z"], 
 
    datasets: [{ 
 
    label: "Self Rating", 
 
    backgroundColor: '#777777', 
 
    borderColor: '#777777', 
 
    data: [1, 2, 0, 0, 0, 0, 0], 
 
    fill: false, 
 
    yAxisID: "y-axis-1", 
 
    }] 
 
}; 
 

 
var myChart = new Chart(ctx, { 
 
    type: 'line', 
 
    data: data, 
 
    options: { 
 
    responsive: true, 
 
    maintainAspectRatio: false, 
 
    legend: { 
 
     position: 'bottom', 
 
    }, 
 
    title: { 
 
     display: true, 
 
     text: 'Check-In History', 
 
    }, 
 
    scales: { 
 
     // Need to limit tick marks to be days 
 
     xAxes: [{ 
 
     display: true, 
 
     type: 'time', 
 
     time: { 
 
      unit: 'day', 
 
      unitStepSize: 1, 
 
      displayFormats: { 
 
      'day': 'MMM DD' 
 
      } 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     id: "y-axis-1", 
 
     display: true, 
 
     position: "left", 
 
     scaleLabel: { 
 
      display: true, 
 
      labelString: 'Mental Health Continuum' 
 
     }, 
 
     ticks: { 
 
      min: 0, 
 
      max: 3.05, 
 
      stepSize: 1, 
 
      suggestedMin: 0, 
 
      suggestedMax: 3.05, 
 
      callback: function(label, index, labels) { 
 
      switch (label) { 
 
       case 0: 
 
       return 'Ill'; 
 
       case 1: 
 
       return 'Injured'; 
 
       case 2: 
 
       return 'Reacting'; 
 
       case 3: 
 
       return 'Healthy'; 
 
      } 
 
      } 
 
     }, 
 
     gridLines: { 
 
      display: false 
 
     } 
 
     }] 
 
    } 
 
    } 
 
});

#myChart { 
 
    min-height: 350px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <canvas id="myChart"></canvas> 
 
</div>

Source

2017-10-05 00:06:04 Alex

Comment puis-je ajouter un remplissage entre les étiquettes de graduation?

Répondre

Questions connexes