2017-09-28 1 views
0

J'essaie de créer un graphique à barres en utilisant reac-chart.js-2. Je viens de remarquer que tous les exemples de graphique à barres commencent à partir du nombre minimum de données, pas 0.Est-il possible de configurer 0 comme un nombre minimum pour le graphique à barres? reac-chart.js-2

L'exemple ci-dessous, le graphique à barres commence à partir de 40, pas 0. Ce que je veux faire est de faire un graphique à barres de départ à partir de 0, pas le nombre minimum de données.

enter image description here

Est-il possible de le faire à l'aide de réagir-chart.js2?

Voici le code (code principalement de l'exemple officiel)

import React from 'react'; 
import {Bar} from 'react-chartjs-2'; 
import 'chartjs-plugin-datalabels'; 


const data = { 
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 
datasets: [ 
{ 
    label: 'My First dataset', 
    backgroundColor: 'rgba(255,99,132,0.2)', 
    borderColor: 'rgba(255,99,132,1)', 
    borderWidth: 1, 
    hoverBackgroundColor: 'rgba(255,99,132,0.4)', 
    hoverBorderColor: 'rgba(255,99,132,1)', 
    data: [65, 59, 80, 81, 56, 55, 40] 
    } 
] 
}; 


export default React.createClass({ 
displayName: 'BarExample', 

render() { 
return (
    <div> 
    <h2>Bar Example (custom size)</h2> 
    <Bar 
     data={data} 
     width={150} 
     height={100} 

    /> 
    </div> 
); 
} 
}); 

Voici un demo.

Répondre

1

Pour démarrer l'axe y de 0, vous devez régler le beginAtZero propriété à true pour axe y tiques, dans les options de tableau, comme suit:

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

voir - working demo

+0

Merci. Bizarrement ça ne marche pas dans ma [une autre démo de travail] (https://stackblitz.com/edit/react-3jufpp) .. – aaayumi

+1

C'est un diagramme à barres horizontales. Dans ce cas, vous devez définir 'beginAtZero' pour l'axe des x. voir [this] (https://stackblitz.com/edit/react-3jufpp?file=Hello.js) –

+0

Je suis tellement stupide! Tu as raison. Merci beaucoup d'avoir signalé .. !!! – aaayumi