2016-06-20 20 views
32

İşte benim kodum. x ve y ekseni ölçeklerinde başlangıç ​​değerini "0" olarak ayarlamalıyım. En son sürüm ölçeklerini denedim.Grafik değerlerinde başlangıç ​​değeri "0" olarak nasıl ayarlanır?

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

cevap

82

Grafik için .js 2. *, skalanın sıfırda başlaması için seçenek configuration options of the linear scale altında listelenmiştir. Bu, büyük olasılıkla y ekseniniz için geçerli olan sayısal veriler için kullanılır. Yani, bu kullanmak gerekir: seçenek y ekseni için kullanılır ki burada

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

örnek bir çizgi grafiği de here mevcuttur. Sayısal verileriniz x ekseninde ise, yAxes yerine xAxes kullanın. Bir dizinin (ve çoğul) yAxes (veya xAxes) için kullanıldığını unutmayın, çünkü birden fazla eksene sahip olabilirsiniz.

+0

Çok teşekkürler xnakos. Benim için çalışıyor –

+0

@SuganthanRaj Hoş Geldiniz! Sadece Chart.js 2.0 için doktora başvurduğunuzdan emin olun. 1.0 sürümünden çok şey değişti ve çoğu örnek çevrimiçi sürüm 1.0 sürümü için geçerli. ;) – xnakos

+0

@SuganthanRaj Örneğin, 'scaleShowVerticalLines' 2.0 için geçerli değil. Veya araç ipucu şablonu. Seçenekler, genel olarak, 2.0'da bir hiyerarşik yaklaşımı takip eder. – xnakos

1

bu seçeneği ekleyiniz:

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

(Referans: Chart.js)

Not: Eğer o Highcharts kullanmıyorsanız ben yayınlanmıştır orijinal çözüm, Highcharts içindi Karışıklık önlemek için lütfen etiketi kaldırın lütfen

+0

çalışmıyor. Ben en son sürümleri kullanıyorum. v2.1 –

+0

Benim Cevap güncellendi – wmash