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.

DaniKR
la source
Pour la référence - stackoverflow.com/a/38299304/1374554
Jaison

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.

Andyhasit
la source
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'
          }
        } ]
      }
    }
  };
Sahil Gandhi
la source
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>
no.name.added
la source
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",
                    },
                  },
                ],
              },
            }}
          />
Fakabbir Amin
la source