Trong Chart.js đặt tiêu đề biểu đồ, tên của trục x và trục y?


88

Chart.js ( tài liệu ) có tùy chọn cho bộ dữ liệu để đặt tên (tiêu đề) của biểu đồ (ví dụ: Nhiệt độ ở Thành phố của tôi), tên của trục x (ví dụ: Ngày) và tên của trục y (ví dụ: Nhiệt độ). Hoặc tôi nên giải quyết điều này với 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]
        }
    ]

}

Realy nhờ giúp đỡ.


Đối với các tài liệu tham khảo - stackoverflow.com/a/38299304/1374554
Jaison

Câu trả lời:


212

Trong phiên bản Chart.js 2.0, có thể đặt nhãn cho các trục:

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

Xem tài liệu Ghi nhãn để biết thêm chi tiết.


vâng các sytax đang làm việc tốt ngay cả sau khi chuyển đổi nó vào thư viện biểu đồ laravel options.thanks rất nhiều tôi đã được tìm kiếm cho syntx đúng và tôi đã nhận nó
Manojkiran.A

10

Nếu bạn đã đặt nhãn cho trục của mình như cách @andyhasit và @Marcus đã đề cập và muốn thay đổi nó sau này, thì bạn có thể thử cách này:

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

Cấu hình đầy đủ để tham khảo:

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

chỉ cần sử dụng cái này:

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

Tôi đang sử dụng Chart_2.5.0.min.js, bạn có thể có nó ở đây: 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",
                    },
                  },
                ],
              },
            }}
          />
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.