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.

DaniKR
sumber
Untuk referensi - stackoverflow.com/a/38299304/1374554
Jaison

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.

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