0
336
Viewshacer gráfico horizontal con porcentaje: reaccionar js
Estoy tratando de hacer un gráfico horizontal con react-chartjs. Quiero que cada dato muestre el porcentaje.
import React, { Component } from "react"; import { HorizontalBar } from "react-chartjs-2"; export default class Button extends Component { render() { const dataHorBar = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", backgroundColor: "#EC932F", 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] } ] }; return ( <div> <HorizontalBar data={dataHorBar} /> </div> ); } } 
Aquí está el código de lo que he probado.
https://codesandbox.io/s/react-chartjs-bar-horizontal-bar-bifurcado-be9wil
También quiero eliminar las líneas de fondo y hacer que el borde del gráfico sea más redondeado.
1 answers
Answer question0
Para usar la función de tener rectángulos redondeados, debe actualizar a la v3 de chartjs , por lo tanto, el siguiente código funcionará solo en esta versión. Pero puede adaptarlo a una versión anterior, simplemente no podrá cambiar el radio del borde del rectángulo.
Puede usar el complemento de etiquetas de datos para mostrar texto personalizado en su gráfico y formatear la etiqueta de esta manera:
options: { plugins: { datalabels: { formatter: value => value + " %", // Add the percentage after the value align: "end", anchor: "end", clip: true, } } } Para las formas, puedes usar la opción borderRadius , para tener bordes redondeados. Puede encontrar más información aquí , pero al final, solo tiene que especificar un valor para borderRadius , en cada conjunto de dataset :
datasets: [ { label: "My First dataset", backgroundColor: "#EC932F", 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], borderRadius: 50, // Give a number } ]Finalmente, para eliminar las líneas de la cuadrícula, puede usar este fragmento y pasar esas opciones a su gráfico
options: { scales: { x: { grid: { display: false // Hide x grid } }, y: { grid: { display: false // Hide y grid } } } };Eso es todo por el principio fundamental. Aquí hay un ejemplo de trabajo en vivo , si realmente quiere ver cómo implementarlo.