[chart.js] 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 설명서 를 참조하십시오.

답변

var config = {
            type: 'line',
            data: {
                labels: ["January", "February", "March", "April", "May", "June", "July"],
                datasets: [{
                        label: "My First dataset",
                        data: [10, 80, 56, 60, 6, 45, 15],
                        fill: false,
                        backgroundColor: "#eebcde ",
                        borderColor: "#eebcde",
                        borderCapStyle: 'butt',
                        borderDash: [5, 5],
                    }]
            },
            options: {
                responsive: true,
                legend: {
                    position: 'bottom',
                },
                hover: {
                    mode: 'label'
                },
                scales: {
                    xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Month'
                            }
                        }],
                    yAxes: [{
                            display: true,
                            ticks: {
                                beginAtZero: true,
                                steps: 10,
                                stepValue: 5,
                                max: 100
                            }
                        }]
                },
                title: {
                    display: true,
                    text: 'Chart.js Line Chart - Legend'
                }
            }
        };

        var ctx = document.getElementById("canvas").getContext("2d");
       new Chart(ctx, config);

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <canvas id="canvas"></canvas>
</body>

스 니펫 확장

답변

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 축 값이 생성됩니다.

답변

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 설명서를 읽어야합니다.