web-dev-qa-db-fra.com

Chart.js Bar Chart - comment tracer des barres à partir de

Je voudrais tracer les barres allant de zéro pour que les nombres positifs augmentent (normalement), mais les nombres négatifs augmentent de zéro. Je reçois plutôt tous les chiffres à partir d’une ligne de base négative.

chart.js
7
user1860288

Les autres réponses n'ont pas fonctionné pour moi. Cependant, j'ai réussi à trouver une autre option de configuration qui a fonctionné pour moi. 

var options = {
    // All of my other bar chart option here
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true
            }
        }]
    }
}
var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);

En passant ceci pour les options de mon graphique, un diagramme à barres avec une échelle allant de 0 à 0 me sera fourni.

29
Kbye

Je pense que tu cherches quelque chose comme ça

Fiddle

HTML

<canvas id="myChart" width="500" height="250"></canvas>

JS

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
    datasets: [
        {
            data: [65, 59, 80, 81, 56, 55, 40, -30]
        }
    ]
};

var options = {
    scaleBeginAtZero: false
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data, options);
2
fatCop

Vous pouvez utiliser d3.js pour le comportement souhaité. Ici est un bon article à ce sujet. Ou Vous pouvez également suivre cet article article en peaufinant le graphique de la trousse de parcelle pour afficher la barre négative descendante.

Pour que cela fonctionne avec chart.js (bien que cela ne soit pas conseillé car cela n’est pas supporté par Chart.js), vous pouvez utiliser ce github pull et au lieu d’utiliser l’objet de configuration globale, c’est-à-dire:

Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleBeginAtZero = false;
Chart.defaults.global.barBeginAtOrigin = false,
Chart.defaults.global.animation = false;

utilisez un objet de configuration séparé et transmettez-le au constructeur du graphique:

var chartOptions = {
    responsive:true,
    scaleBeginAtZero:false,
    barBeginAtOrigin:true
}
var chartInstance = new Chart(ctx).Bar(myChartData, chartOptions);
1
sam100rav

J'utilise Chart.js version 2.0.2, ce qui pourrait être réalisé à l'aide de yAxes.min. Si le graphique est vide, vous pouvez utiliser yAxes.suggestedMax.

Exemple:

options:{
    .
    .
    .
    scales{
        yAxes:[{
            min:0,
            //this value will be overridden if the scale is greater than this value
            suggestedMax:10
        }]
    }
1
Mohamed Badr
public barChartOptions: any = {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true}
            }]
        },
     }
1
Reegan S

utilisez beginat zero comme ci-dessous:

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