¿Cómo establecer el valor inicial como "0" en chartjs?


109

aquí está mi código. Necesito establecer el valor inicial como "0" en las escalas de los ejes X e Y. He probado la última versión de la opción de escalas.

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

Respuestas:


298

Para Chart.js 2. *, la opción para que la escala comience en cero se muestra en las opciones de configuración de la escala lineal . Esto se usa para datos numéricos, que probablemente debería ser el caso de su eje y. Entonces, necesitas usar esto:

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

Aquí también se encuentra disponible un gráfico de líneas de muestra donde la opción se usa para el eje y. Si sus datos numéricos están en el eje x, use en xAxeslugar de yAxes. Tenga en cuenta que una matriz (y plural) se usa para yAxes(o xAxes), porque también puede tener varios ejes.


@SuganthanRaj ¡De nada! Solo asegúrese de consultar los documentos de Chart.js 2.0. Mucho ha cambiado desde la versión 1.0 y la mayoría de los ejemplos en línea se aplican a la versión 1.0. ;)
xnakos

@SuganthanRaj Por ejemplo, scaleShowVerticalLinesno es válido para 2.0. O la plantilla de información sobre herramientas. Las opciones, en general, siguen un enfoque jerárquico en 2.0.
xnakos


1

Agregue esta opción:

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

(Referencia: Chart.js )

NB: La solución original que publiqué fue para Highcharts, si no está utilizando Highcharts, elimine la etiqueta para evitar confusiones


2
no funciona . Estoy usando la última versión de chartjs v2.1
Suganthan Raj

@wmash Necesito comenzar el gráfico desde el valor predefinido. Sabes como hacer esto? Traté de poner esta opción en verdadero y falso, pero no funciona.
Michael.D

esto es incorrecto y podría / debería eliminarse. beginAtZero: truees lo que necesitas
triple
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.