Y 축의 최대 값과 최소값을 설정하는 방법

http://www.chartjs.org/ 에서 꺾은 선형 차트를 사용하고 있습니다 .

Y 축의 최대 값 (130) 및 최소값 (60)이 자동으로 선택되는 것을 볼 수 있듯이 최대 값 = 500 및 최소값 = 0을 원합니다. 이게 가능해?

당신은 규모를 재정의해야합니다, 이것을 시도하십시오 :

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 
    });
}

chart.js V2 (베타)의 경우 다음을 사용하십시오.

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

자세한 내용 은 선형 축 구성에 대한 chart.js 설명서 를 참조하십시오.

ChartJS v2.4.0

2017 년 2 월 7 일 https://github.com/jtblin/angular-chart.js 의 예에 표시된 것처럼 (이는 자주 변경 될 수 있으므로) :

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

다음과 같이 5 개의 y 축 값이 생성됩니다.

100
80
60
40
20
0

2016 년에 이것을 작성하면 Chart js 2.3.0이 최신 버전입니다. 다음은 그것을 바꿀 수있는 방법입니다

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

위의 답변은 저에게 효과적이지 않았습니다. 아마도 11 월 이후 옵션 이름이 변경되었지만 다음과 같은 트릭이 나에게 도움이되었습니다.

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

v2에서 '옵션'으로 구성합니다.

http://www.chartjs.org/docs/#scales-linear-scale 설명서를 읽어야합니다.

나는 간격을 20으로하여 y 축에 0에서 100까지의 값을 표시하는 js를 작성했습니다.

이것은 내 script.js입니다

//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,
        }
      }]
    }
  }
});

웹에 표시되는 그래프입니다.

최고의 솔루션

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

옵션에서 scaleStartValue 의 값을 설정하십시오 .

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

여기에 대한 설명서를 참조 하십시오 .

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

이것은 Charts.js 2.0을위한 것입니다 :

이들 중 일부가 작동하지 않는 이유는 다음과 같이 차트를 작성할 때 옵션을 선언해야하기 때문입니다.

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

    });
})

이에 대한 설명서는 다음과 같습니다. http://www.chartjs.org/docs/#scales

1.1.1에서는 다음을 사용하여 0.0과 1.0 사이의 배율을 수정했습니다.

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

내 경우에는 yaxis 틱으로 콜백을 사용했으며 내 값은 백분율로 표시되며 100 %에 도달하면 점을 표시하지 않으므로 다음을 사용했습니다.

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

그리고 그것은 잘 작동했습니다.

위의 제안 중 어느 것도 charts.js 2.1.4에서 도움이되지 않았으므로 데이터 세트 배열에 값 0을 추가하여 문제를 해결했습니다 (그러나 추가 레이블은 없음).

statsData.push(0);

[...]

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

나는 확실하지 않은 chart.js의 v1.x를 사용하고있는 여러 프로젝트에서 Flat Lab 템플릿의 이전 버전을 사용하고 있었다. 이미 여러 프로젝트가 있었으므로 v2.x로 업데이트 할 수 없었다 . 위에서 언급 한(bardata,options) 것은 나를 위해 작동하지 않았습니다.

버전 1.x의 해킹은 다음과 같습니다.

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

다음으로 교체하십시오.

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

차트에는 "최소"및 "최대"값이 있습니다. 이 링크에 대한 설명서

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