chartjs'de başlangıç ​​değerini "0" olarak nasıl ayarlayabilirim?


110

İşte benim kodum. Hem x hem de y ekseni ölçeklerinde başlangıç ​​değerini "0" olarak ayarlamam gerekiyor. En son sürüm ölçekleri seçeneğini denedim.

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

Yanıtlar:


299

Chart.js 2. * için, ölçeğin sıfırdan başlaması seçeneği doğrusal ölçeğin yapılandırma seçenekleri altında listelenmiştir . Bu, büyük olasılıkla y ekseniniz için geçerli olması gereken sayısal veriler için kullanılır. Yani, bunu kullanmanız gerekiyor:

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

Bir numune çizgi grafiği de mevcuttur burada seçenek y ekseni için kullanıldığı zaman. Sayısal verileriniz x eksenindeyse xAxesbunun yerine kullanın yAxes. yAxes(Veya xAxes) için bir dizi (ve çoğul) kullanıldığını unutmayın , çünkü birden fazla ekseniniz de olabilir.


@SuganthanRaj Hoş geldiniz! Yalnızca Chart.js 2.0 için dokümanlara başvurduğunuzdan emin olun. 1.0 sürümünden çok şey değişti ve çevrimiçi örneklerin çoğu 1.0 sürümü için geçerlidir. ;)
xnakos

@SuganthanRaj Örneğin, scaleShowVerticalLines2.0 için geçerli değildir. Veya araç ipucu şablonu. Seçenekler, genel olarak, 2.0'da hiyerarşik bir yaklaşım izler.
xnakos


1

Lütfen bu seçeneği ekleyin:

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

(Referans: Chart.js )

Not: Yayınladığım orijinal çözüm Highcharts içindi, Highcharts kullanmıyorsanız karışıklığı önlemek için lütfen etiketi kaldırın


2
çalışmıyor . chartjs v2.1'in en son sürümünü kullanıyorum
Suganthan Raj

@wmash Grafiği önceden tanımlanmış değerden başlatmam gerekiyor. Bunun nasıl yapılacağını biliyor musun? Bu seçeneği hem doğru hem de yanlış olarak belirlemeye çalıştım ama işe yaramıyor.
Michael.D

bu yanlıştır ve silinebilir / silinmelidir. beginAtZero: trueihtiyacınız olan şey
üçlü
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.