comment définir la valeur de départ comme «0» dans chartjs?

109

voici mon code. J'ai besoin de définir la valeur initiale comme "0" dans les échelles des axes x et y. J'ai essayé la dernière option d'échelles de version.

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);
   }     
Suganthan Raj
la source

Réponses:

298

Pour Chart.js 2. *, l'option permettant à l'échelle de commencer à zéro est répertoriée sous les options de configuration de l'échelle linéaire . Ceci est utilisé pour les données numériques, ce qui devrait probablement être le cas pour votre axe y. Donc, vous devez utiliser ceci:

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

Un exemple de graphique en courbes est également disponible ici où l'option est utilisée pour l'axe y. Si vos données numériques sont sur l'axe des x, utilisez à la xAxesplace de yAxes. Notez qu'un tableau (et pluriel) est utilisé pour yAxes(ou xAxes), car vous pouvez aussi bien avoir plusieurs axes.

xnakos
la source
@SuganthanRaj Vous êtes les bienvenus! Assurez-vous simplement de consulter la documentation de Chart.js 2.0. Beaucoup de choses ont changé depuis la version 1.0 et la plupart des exemples en ligne s'appliquent à la version 1.0. ;)
xnakos
@SuganthanRaj Par exemple, le scaleShowVerticalLinesn'est pas valide pour 2.0. Ou le modèle d'info-bulle. Les options, en général, suivent une approche hiérarchique en 2.0.
xnakos
3

Si vous avez besoin de l'utiliser comme configuration par défaut, placez-le simplement min: 0à l'intérieur du nœud defaults.scale.ticks, comme suit:

defaults: {
  global: {...},
  scale: {
    ...
    ticks: { min: 0 },
  }
},

Référence: https://www.chartjs.org/docs/latest/axes/

tuliomarchetto
la source
1

Veuillez ajouter cette option:

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

(Référence: Chart.js )

NB: La solution d'origine que j'ai publiée était pour Highcharts, si vous n'utilisez pas Highcharts, veuillez supprimer la balise pour éviter toute confusion

wmash
la source
2
ça ne fonctionne pas . J'utilise la dernière version de chartjs v2.1
Suganthan Raj
@wmash J'ai besoin de démarrer le graphique à partir de la valeur prédéfinie. Sais-tu comment faire cela? J'ai essayé de mettre cette option à la fois sur vrai et faux, mais cela ne fonctionne pas.
Michael.D
ceci est incorrect et pourrait / devrait être supprimé. beginAtZero: trueest ce dont vous avez besoin
triple du