Cách đặt giá trị tối đa và tối thiểu cho trục Y

Tôi đang sử dụng biểu đồ đường từ http://www.chartjs.org/

Như bạn có thể thấy giá trị tối đa (130) và giá trị tối thiểu (60) cho trục Y được chọn tự động, tôi muốn giá trị tối đa = 500 và giá trị tối thiểu = 0. Điều này có thể không?

Bạn phải ghi đè lên thang đo, hãy thử điều này:

window.onload = function(){
    var ctx = document.getElementById("canvas").getContext("2d");
    window.myLine = new Chart(ctx).Line(lineChartData, {
        scaleOverride : true,
        scaleSteps : 10,
        scaleStepWidth : 50,
        scaleStartValue : 0 
    });
}

Đối với chart.js V2 (beta), hãy sử dụng:

var options = {
    scales: {
        yAxes: [{
            display: true,
            ticks: {
                suggestedMin: 0,    // minimum will be 0, unless there is a lower value.
                // OR //
                beginAtZero: true   // minimum value will be 0.
            }
        }]
    }
};

Xem tài liệu chart.js về cấu hình trục tuyến tính để biết thêm chi tiết.

Biểu đồJS v2.4.0

Như được hiển thị trong các ví dụ tại https://github.com/jtblin/angular-chart.js vào ngày 7 tháng 7 năm 2017 (vì điều này dường như có thể thay đổi thường xuyên):

var options = {
    yAxes: [{
        ticks: {
            min: 0,
            max: 100,
            stepSize: 20
        }
    }]
}

Điều này sẽ dẫn đến 5 giá trị trục y như sau:

100
80
60
40
20
0

Viết bài này vào năm 2016 trong khi Biểu đồ js 2.3.0 là bài mới nhất. Đây là cách người ta có thể thay đổi nó

var options = {
    scales: {
        yAxes: [{
            display: true,
            stacked: true,
            ticks: {
                min: 0, // minimum value
                max: 10 // maximum value
            }
        }]
    }
};

Các câu trả lời trên không làm việc cho tôi. Có thể các tên tùy chọn đã được thay đổi kể từ '11, nhưng những điều sau đây đã giúp tôi:

ChartJsProvider.setOptions
  scaleBeginAtZero: true

window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx ,{
          type: 'line',
          data: yourData,
          options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true,
                        min: 0,
                        max: 500    
                    }
                  }]
               }
            }
});

Tôi cấu hình với 'tùy chọn' trong v2.

Bạn nên đọc tài liệu: http://www.chartjs.org/docs/#scales-linear-scale

Tôi đã viết một js để hiển thị các giá trị từ 0 đến 100 theo trục y với khoảng cách là 20.

Đây là script.js của tôi

//x-axis
var vehicles = ["Trucks", "Cars", "Bikes", "Jeeps"];

//The percentage of vehicles of each type
var percentage = [41, 76, 29, 50];

var ctx = document.getElementById("barChart");
var lineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: vehicles,
    datasets: [{
      data: percentage,
      label: "Percentage of vehicles",
      backgroundColor: "#3e95cd",
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          min: 0,
          max: 100,
          stepSize: 20,
        }
      }]
    }
  }
});

Đây là biểu đồ hiển thị trên web.

> Giải pháp tốt nhất

  "options":{
                    scales: {
                                yAxes: [{
                                    display: true,
                                    ticks: {
                                        suggestedMin: 0, //min
                                        suggestedMax: 100 //max 
                                    }
                                }]
                            }
                    }

Chỉ cần đặt giá trị cho scaleStartValue trong các tùy chọn của bạn.

var options = {
   // ....
   scaleStartValue: 0,
}

Xem tài liệu cho việc này ở đây .

yAxes: [{
    display: true,
    ticks: {
        beginAtZero: true,
        steps:10,
        stepValue:5,
        max:100
    }
}]

Cái này dành cho Charts.js 2.0:

Lý do một số trong số này không hoạt động là vì bạn nên khai báo các tùy chọn của mình khi bạn tạo biểu đồ của mình như vậy:

$(function () {
    var ctxLine = document.getElementById("myLineChart");
    var myLineChart = new Chart(ctxLine, {
        type: 'line',
        data: dataLine,
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        min: 0,
                        beginAtZero: true
                    }
                }]
            }
        }

    });
})

Tài liệu cho việc này ở đây: http://www.chartjs.org/docs/#scales

Với 1.1.1, tôi đã sử dụng cách sau để sửa tỷ lệ giữa 0,0 và 1,0:

var options = {
    scaleOverride: true,
    scaleStartValue: 0,
    scaleSteps: 10,
    scaleStepWidth: 0.1
}

Trong trường hợp của tôi, tôi đã sử dụng một cuộc gọi lại trong các dấu hiệu yaxis, các giá trị của tôi được tính bằng phần trăm và khi nó đạt đến 100% thì nó không hiển thị dấu chấm, tôi đã sử dụng điều này:

      yAxes: [{
                   ticks: {
                       beginAtZero: true,
                       steps: 10,
                       stepValue: 5,
                       max: 100.1,
                       callback: function(value, index, values) {
                           if (value !== 100.1) {
                               return values[index]
                           }
                       }
                   }
               }],

Và nó hoạt động tốt.

Vì không có gợi ý nào ở trên giúp tôi với chart.js 2.1.4, tôi đã giải quyết nó bằng cách thêm giá trị 0 vào mảng tập dữ liệu của tôi (nhưng không có nhãn phụ):

statsData.push(0);

[...]

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        datasets: [{
            data: statsData,
[...]

Tôi đã sử dụng một phiên bản cũ của mẫu Flat Lab trong nhiều dự án của tôi đang sử dụng v1.x của chart.js mà tôi không chắc chắn. Tôi không thể cập nhật lên v2.x vì tôi đã có nhiều dự án làm việc với nó . Những điều đã đề cập ở trên(bardata,options) đã không làm việc cho tôi.

Vì vậy, đây là bản hack cho phiên bản 1.x

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,valueBounds.minSteps,valueBounds.maxValue,valueBounds.minValue,labelTemplateString);

Thay thế bằng:

calculatedScale = calculateScale(scaleHeight,valueBounds.maxSteps,1,valueBounds.maxValue,0,labelTemplateString);

Biểu đồ có giá trị "tối thiểu" và "tối đa". Tài liệu về liên kết này

https://www.chartjs.org/docs/latest/axes/cartesian/linear.html