ใน Chart.js ตั้งชื่อแผนภูมิชื่อแกน x และแกน y?


91

Chart.js ( เอกสารประกอบ ) มีตัวเลือกสำหรับชุดข้อมูลเพื่อตั้งชื่อ (ชื่อเรื่อง) ของแผนภูมิ (เช่นอุณหภูมิในเมืองของฉัน) ชื่อแกน x (เช่นวัน) และชื่อแกน y (เช่นอุณหภูมิ) หรือไม่ หรือฉันควรแก้ปัญหานี้ด้วย 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]
        }
    ]

}

ขอบคุณจริงๆสำหรับความช่วยเหลือ


สำหรับข้อมูลอ้างอิง - stackoverflow.com/a/38299304/1374554
Jaison

คำตอบ:


219

ใน Chart.js เวอร์ชัน 2.0 คุณสามารถตั้งค่าเลเบลสำหรับแกนได้:

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

ดูเอกสารการติดฉลากสำหรับรายละเอียดเพิ่มเติม


ใช่ sytax ทำงานได้ดีแม้ว่าจะแปลงเป็นตัวเลือกไลบรารีแผนภูมิ laravel แล้วก็ตามขอบคุณมากที่ฉันกำลังมองหา syntx ที่ถูกต้องและได้รับมัน
Manojkiran

10

หากคุณได้ตั้งค่าป้ายกำกับสำหรับแกนของคุณแล้วเช่นที่ @andyhasit และ @Marcus กล่าวถึงและต้องการเปลี่ยนแปลงในภายหลังคุณสามารถลองสิ่งนี้:

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

การกำหนดค่าแบบเต็มสำหรับการอ้างอิง:

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

เพียงใช้สิ่งนี้:

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

ฉันใช้ Chart_2.5.0.min.js คุณสามารถหาได้ที่นี่: 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",
                    },
                  },
                ],
              },
            }}
          />
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.