2016-06-20 30 views
32

ecco il mio codice. ho bisogno di impostare il valore iniziale come "0" in entrambe le scale dell'asse xey. Ho provato l'ultima opzione di ridimensionamento della versione.come impostare il valore iniziale come "0" in chartjs?

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

risposta

82

Per grafico .js 2. *, l'opzione per iniziare la scala a zero è elencata sotto configuration options of the linear scale. Questo è usato per i dati numerici, che molto probabilmente dovrebbe essere il caso per il tuo asse y. Quindi, è necessario utilizzare questo: grafico a linea

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

Un esempio è disponibile anche here in cui l'opzione viene utilizzata per l'asse y. Se i dati numerici si trovano sull'asse x, utilizzare xAxes anziché yAxes. Si noti che una matrice (e plurale) viene utilizzata per yAxes (o xAxes), poiché si può anche avere più assi.

+0

Grazie mille xnakos. funziona per me –

+0

@SuganthanRaj Siete i benvenuti! Assicurati di consultare i documenti per Chart.js 2.0. Molto è cambiato rispetto alla versione 1.0 e la maggior parte degli esempi online si applica alla versione 1.0. ;) – xnakos

+0

@SuganthanRaj Ad esempio, 'scaleShowVerticalLines' non è valido per 2.0. O il modello del tooltip. Le opzioni, in generale, seguono un approccio gerarchico in 2.0. – xnakos

1

Si prega di aggiungere questa opzione:

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

(Riferimento: Chart.js)

NB: La soluzione originale che ho postato era per Highcharts, se non si utilizza Highcharts poi rimuovi il tag per evitare confusione

+0

non funziona. Sto usando l'ultima versione di chartjs v2.1 –

+0

Aggiornato la mia risposta – wmash

Problemi correlati