Di Chart.js atur judul grafik, nama sumbu x dan sumbu y?


91

Apakah Chart.js ( dokumentasi ) memiliki opsi untuk dataset untuk mengatur nama (judul) grafik (misalnya Suhu di Kota saya), nama sumbu x (misalnya Hari) dan nama sumbu y (misalnya Suhu). Atau saya harus menyelesaikan ini dengan 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]
        }
    ]

}

Terima kasih banyak atas bantuannya.


Jawaban:


218

Di Chart.js versi 2.0, dimungkinkan untuk mengatur label untuk sumbu:

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

Lihat Dokumentasi pelabelan untuk lebih jelasnya.


ya, sytax berfungsi dengan baik bahkan setelah mengubahnya menjadi opsi pustaka bagan laravel. terima kasih banyak saya telah mencari sintaks yang benar dan saya mendapatkannya
Manojkiran.

10

Jika Anda telah menyetel label untuk sumbu Anda seperti yang disebutkan @andyhasit dan @Marcus, dan ingin mengubahnya di lain waktu, Anda dapat mencoba ini:

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

Konfigurasi lengkap untuk referensi:

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'
          }
        } ]
      }
    }
  };

5

gunakan saja ini:

<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>

Saya menggunakan Chart_2.5.0.min.js, Anda dapat memilikinya di sini: cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js
no.name. Ditambahkan

0
          <Scatter
            data={data}
            // style={{ width: "50%", height: "50%" }}
            options={{
              scales: {
                yAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Probability",
                    },
                  },
                ],
                xAxes: [
                  {
                    scaleLabel: {
                      display: true,
                      labelString: "Hours",
                    },
                  },
                ],
              },
            }}
          />
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.