0
366
Vistas¿Cómo agregar color de relleno condicional en el gráfico de área de Chart.js?
Estoy trabajando en un proyecto que requiere que diseñe un gráfico como el siguiente diagrama: 
Estoy usando chart.js y reacciono para hacer el gráfico de distribución. Pero no puedo averiguar cómo agregar el color de relleno del gráfico de área entre un rango particular de valores de la variable x. Hasta ahora, soy capaz de lograr esto: 
He usado el siguiente código para hacer que el gráfico de área sea un componente de reacción:
const data = { labels: {DataLabel}, datasets: [ { label: 'Blood Sugar Measure', data: {Data}, fill: true, backgroundColor: ["#E5E5E5", "#E5E5E5", "#B4EDB3", "#B4EDB3", "#E5E5E5"], pointBorderColor: "#8884d8", pointBorderWidth: 2, pointRadius: 3, tension: 0.4 }, ], }; const options = { plugins: { legend: { display: false } }, layout: { padding: { bottom: 0.1 } }, scales: { y: { display : false, beginAtZero: true, grid: { display: false }, ticks: { color: "#000000", font: { size: 18 } } }, x: { beginAtZero: true, grid: { display: false }, ticks: { color: "#000000", font: { size: 10 }, min: 0 } } }, }; export const DistChart = () => { return (<div className="App"> <Line data={data} options={options} /> </div>); };Necesitaría ayuda para aplicar el color de relleno condicional basado en la variable del eje x.
2 Respuestas
Responde la pregunta0
Puede utilizar varios conjuntos de datos con datos de objetos para poder especificar puntos de inicio y finalización. Después de esto, puede manipular la leyenda para que parezca que es solo un único conjunto de datos:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: 'Blood Sugar Measure extra', data: [{ x: "Red", y: 5 }, { x: "Blue", y: 8 }], backgroundColor: 'lightGray', fill: true }, { label: 'Blood Sugar Measure', data: [{ x: "Blue", y: 8 }, { x: "Yellow", y: 12 }, { x: "Green", y: 10 }], backgroundColor: 'pink', fill: true }, { label: 'Blood Sugar Measure extra', data: [{ x: "Green", y: 10 }, { x: "Purple", y: 12 }, { x: "Orange", y: 10 }], backgroundColor: 'lightGray', fill: true } ] }, options: { plugins: { legend: { onClick: (e, legendItem, legend) => { const ci = legend.chart; const currentlyHidden = ci.getDatasetMeta(0).hidden; for (let i = 0; i < ci.data.datasets.length; i++) { ci.setDatasetVisibility(i, currentlyHidden) } ci.update(); }, labels: { filter: (e) => (!e.text.includes('extra')) } } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options); <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script> </body>0
Pude hacer algunos progresos en el diseño que quería, así que pensé en compartir mi respuesta para beneficiar a otros. Pude completar según los valores de datos del eje x y obtener el siguiente gráfico: 
Tuve que usar la propiedad de segmento dentro de las configuraciones de datos para lograr esto, con la ayuda de una función. Este es el código modificado:
const highlightRegion = (ctx, value) => { if (ctx.p0DataIndex > boundary_val1 && ctx.p0DataIndex < boundary_val2) { return "#B4EDB3"; } return "#E5E5E5"; }; const bgColor = ctx => highlightRegion(ctx, "#B4EDB3"); const data = { labels: x_values, datasets: [ { label: 'Count', data: [0, 20, 40, 80, 150, 80, 30, 0], pointRadius: 0, fill: true, tension: 0.4, segment: { backgroundColor: bgColor, borderColor: bgColor, }, }, ], };Un agradecimiento especial a esta serie de YouTube desde donde pude encontrar mi respuesta: https://www.youtube.com/watch?v=st2O-pvhWM4 .
Mantendré esta publicación abierta, en caso de que haya una mejor solución, ya que creo que mi solución no es absolutamente correcta.