chartjs에서 시작 값을 "0"으로 설정하는 방법은 무엇입니까?


109

여기 내 코드입니다. x 및 y 축 스케일 모두에서 초기 값을 "0"으로 설정해야합니다. 나는 최신 버전 저울 옵션을 시도했습니다.

graphOptions = {               
            ///Boolean - Whether grid lines are shown across the chart
            scaleShowGridLines: false,    
            tooltipTitleTemplate: "<%= label%>",
            //String - Colour of the grid lines
            scaleGridLineColor: "rgba(0,0,0,.05)",
            //Number - Width of the grid lines
            scaleGridLineWidth: 1,
            //Boolean - Whether to show horizontal lines (except X axis)
            scaleShowHorizontalLines: true,
            //Boolean - Whether to show vertical lines (except Y axis)
            scaleShowVerticalLines: true,
            //Boolean - Whether the line is curved between points
            bezierCurve: true,
            //Number - Tension of the bezier curve between points
            bezierCurveTension: 0.4,
            //Boolean - Whether to show a dot for each point
            pointDot: true,
            //Number - Radius of each point dot in pixels
            pointDotRadius: 4,
            //Number - Pixel width of point dot stroke
            pointDotStrokeWidth: 1,               
            pointHitDetectionRadius: 20,               
            datasetStroke: true,
            datasetStrokeWidth: 2,
            datasetFill: true,               
            legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
        };
        var LineChart = new Chart(ctx).Line(graphData, graphOptions);
   }     

답변:


298

Chart.js 2. *의 경우 0에서 시작하는 스케일 옵션은 선형 스케일구성 옵션 아래에 나열됩니다 . 이것은 숫자 데이터에 사용되며 아마도 y 축의 경우 일 것입니다. 따라서 이것을 사용해야합니다.

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

y 축에 옵션이 사용되는 샘플 라인 차트도 여기 에서 사용할 수 있습니다 . 숫자 데이터가 x 축에 있으면 xAxes대신을 사용하십시오 yAxes. 축이 여러 개있을 수도 있으므로 배열 (및 복수)이 yAxes(또는 xAxes)에 사용됩니다 .


@SuganthanRaj 천만에요! Chart.js 2.0에 대한 문서를 참조하십시오. 1.0 버전에서 많이 변경되었으며 대부분의 온라인 예제는 1.0 버전에 적용됩니다. )
xnakos

@SuganthanRaj 예를 들어, scaleShowVerticalLines2.0에서는 유효하지 않습니다. 또는 툴팁 템플릿. 일반적으로 옵션은 2.0의 계층 적 접근 방식을 따릅니다.
xnakos


1

이 옵션을 추가하십시오 :

//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero : true,

(참조 : Chart.js )

참고 : 내가 게시 한 원래 솔루션은 Highcharts 용이었습니다. Highcharts를 사용하지 않는 경우 혼동을 피하기 위해 태그를 제거하세요.


2
작동하지 않습니다. 최신 버전의 chartjs v2.1을 사용하고 있습니다
Suganthan Raj 2016 년

@wmash 미리 정의 된 값에서 차트를 시작해야합니다. 어떻게하는지 아십니까? 이 옵션을 true와 false로 설정하려고했지만 작동하지 않습니다.
Michael.D

이것은 올바르지 않으며 삭제 될 수 있습니다. beginAtZero: true당신이 필요합니다
트리플
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.