Y축의 max 및 min 값을 설정하는 방법

Question

Rajendra

Question

Y축의 max 및 min 값을 설정하는 방법

http://www.chartjs.org/의 꺽은선형 차트를 사용하고 있습니다. 여기에 이미지 설명 입력

Y축에 대한 max value(130)와 min value(60)가 자동으로 선택되는 것을 볼 수 있듯이 max value = 500, min value = 0을 원합니다. 이게 가능할까요?

Uwe Keim

편집된 질문21일 2월 2019 в 5:41

프로그래밍

chart.js

Popular videos

« 이전

Ofer Segev

22일 2월 2016 в 12:30

처t.j스 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.
            }
        }]
    }
};

처t.j스 관한 문서가 일괄이라는 axes 구성 에서 자세한 내용을 참조.

Pedro A

편집된 답변10일 1월 2018 в 4:07

229

0

Solution / Answer

Ramesh

11일 8월 2016 в 1:18

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 거짓값 바벨. &gt 거짓값 -;

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>

끝 - &lt 스니핏 >;!

51

0

Tom Nijs

7일 2월 2017 в 10:19

처티스 v2.4.0

7 일 http://support. (https://github.com/jtblin/angular-chart.js) 의 예에서 볼 수 있듯이 2017년 월에는 (이후 것 같다고 자주 받아야 변경률):

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

이로 인해 5 y-축 다음과 같은 값을

Eduardo Dennis

편집된 답변25일 7월 2017 в 7:53

36

0

Koushik Das

25일 10월 2016 в 3:06

이 글을 쓰는 동안 2016년 차트입니다 2.3.0 js 는 최신 버전을. 다음은 한 어떻게 바꿀 수

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

Damien Sawyer

편집된 답변3일 5월 2018 в 4:52

21

0

troelskn

23일 5월 2015 в 8:11

위의 대답들은 내게는 통하지 않았다. 아마도 '11 이후 옵션 이름이 변경되었을 수 있지만, 다음과 같은 점이 도움이 되었습니다.

ChartJsProvider.setOptions
  scaleBeginAtZero: true

15

0

David Martinez Urrea

26일 9월 2016 в 7:51

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

난 # 39, & # 39 로 구성할 options&. v2 의.

붽뎄 읽어야 합니다. http://www.chartjs.org/docs/ # 는 선형 증가

13

0

JPeG

9일 6월 2016 в 2:53

이 캐비닛용입니다 카르츠실제스 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/ # 확장할 수 있습니다.

JPeG

편집된 답변9일 6월 2016 в 5:23

7

0

Ramesh

16일 5월 2016 в 8:56

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

Tunaki

편집된 답변16일 5월 2016 в 9:13

7

0

rtome

11일 3월 2015 в 3:53

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

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

자세한 내용은 여기 설명서를 참조하십시오.

7

0

Ishara Amarasekera

21일 2월 2019 в 5:39

내가 쓴 《 0 부터 100 에서 무려 20 y-축 수신기마다 js 값을 표시할 수 있습니다.

이건 내 스크리프t.j스

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

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

끝 - &lt 스니핏 >;!

이것은 웹에서 시됩니다 그래프화합니다.

! [마을의 차량 백분율입니다.] [1]

5

0

Philippe Riand

6일 6월 2016 в 3:19

1.1.1 로, 난 다음 해결하기 위해 사용되는 배율입니다 0.0 과 1.0 사이의:

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

Lingasamy Sakthivel

편집된 답변25일 6월 2016 в 10:02

3

0

AZIIZ Farhat

23일 1월 2019 в 10:33

제 경우에는 제가 사용하고 있는 진드기, 야시스 콜백하는 내 에 도달했을 때, 이 값은 100% % 와 이를 활용한 doesn& # 39 점, 내가 볼 수 없다.

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

또한 주효했다.

1

0

Sceptical Jule

29일 8월 2016 в 11:43

어느 날, 나는 카르츠실제스 2.1.4 해결할 수 있는 만큼 그들위에 제안 내용을 추가해 내 데이터 세트의 값은 0 어레이입니다 (없고 추가 라벨):

statsData.push(0);

[...]

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

0

Black Mamba

26일 5월 2017 в 10:43

제가 사용하고 있는 여러 프로젝트) 의 이전 버전의 균등형 실습에서는 템플리트를 v1.x 사용한 # 39 m, 어떤 i& 내거냐 처t.j스 확실하지 않습니다. As I v2.x 업데이트하십시오 이미 여러 프로젝트를 쉽게 작업할 수 없음. 위에 언급된 ' (바르타, 옵션뿐)' 는 작동안함 for me.

여기서는 버전 1.x 대한 해킹 사건

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

바꿀 수 있습니다.

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

0