Dans Chart.js, définissez le titre du graphique, le nom de l'axe des x et de l'axe des y?


87

Chart.js ( documentation ) a-t-il l'option pour les ensembles de données de définir le nom (titre) du graphique (par exemple, la température dans ma ville), le nom de l'axe des x (par exemple les jours) et le nom de l'axe des y (par exemple la température). Ou je devrais résoudre ça avec CSS?

var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
        {
            fillColor : "rgba(220,220,220,0.2)",
            strokeColor : "rgba(220,220,220,1)",
            pointColor : "rgba(220,220,220,1)",
            pointStrokeColor : "#fff",
            pointHighlightFill : "#fff",
            pointHighlightStroke : "rgba(220,220,220,1)",
            data : [data]
        }
    ]

}

Vraiment merci pour votre aide.


Réponses:


211

Dans Chart.js version 2.0, il est possible de définir des étiquettes pour les axes:

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'probability'
      }
    }]
  }     
}

Consultez la documentation sur l'étiquetage pour plus de détails.


oui, la syntaxe fonctionne bien même après l'avoir convertie dans les options de la bibliothèque de graphiques laravel.Merci beaucoup, j'ai cherché la syntaxe correcte et je l'ai
eue

10

Si vous avez déjà défini des libellés pour votre axe comme la façon dont @andyhasit et @Marcus l'ont mentionné, et que vous souhaitez le modifier ultérieurement, vous pouvez essayer ceci:

chart.options.scales.yAxes[ 0 ].scaleLabel.labelString = "New Label";

Configuration complète pour référence:

var chartConfig = {
    type: 'line',
    data: {
      datasets: [ {
        label: 'DefaultLabel',
        backgroundColor: '#ff0000',
        borderColor: '#ff0000',
        fill: false,
        data: [],
      } ]
    },
    options: {
      responsive: true,
      scales: {
        xAxes: [ {
          type: 'time',
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Date'
          },
          ticks: {
            major: {
              fontStyle: 'bold',
              fontColor: '#FF0000'
            }
          }
        } ],
        yAxes: [ {
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'value'
          }
        } ]
      }
    }
  };

4

utilisez simplement ceci:

<script>
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1","2","3","4","5","6","7","8","9","10","11",],
      datasets: [{
        label: 'YOUR LABEL',
        backgroundColor: [
          "#566573",
          "#99a3a4",
          "#dc7633",
          "#f5b041",
          "#f7dc6f",
          "#82e0aa",
          "#73c6b6",
          "#5dade2",
          "#a569bd",
          "#ec7063",
          "#a5754a"
        ],
        data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],            
      },]
    },
    //HERE COMES THE AXIS Y LABEL
    options : {
      scales: {
        yAxes: [{
          scaleLabel: {
            display: true,
            labelString: 'probability'
          }
        }]
      }
    }
  });
</script>

J'utilise Chart_2.5.0.min.js, vous pouvez l'avoir ici: cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js
no.name.added

0
          <Scatter
            data={data}
            // style={{ width: "50%", height: "50%" }}
            options={{
              scales: {
                yAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Probability",
                    },
                  },
                ],
                xAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Hours",
                    },
                  },
                ],
              },
            }}
          />
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.