En un proyecto de React, se trazan datos numéricos que se asemejan a un gráfico y esos datos se muestran en puntos específicos cuando se pasa el cursor sobre el gráfico. Aquí los datos numéricos están en formato de matriz, pero necesito agregar una segunda matriz de datos para mostrar las 'fechas' correspondientes a esos datos. ¿Alguna solución adecuada?
A continuación se muestra el código de referencia
const DemoTinyArea: React.FC = () => { var data = [ 264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592 ]; {/* var data2 = [ '2021-06-01T00:00:00','2021-07-01T00:00:00', '2021-09-01T00:00:00', '2021-02-01T00:00:00', '2021-03-01T00:00:00', '2021-04-01T00:00:00', '2021-07-01T00:00:00', '2021-01-01T00:00:00', '2021-02-01T00:00:00', '2021-05-01T00:00:00', '2021-08-01T00:00:00', '2021-04-01T00:00:00' ] */} var config = { height: 60, autoFit: false, data: data, // How to append data2 here smooth: true, }; return <TinyArea {...config} />; };Como se puede ver en el código anterior, se traza una matriz de datos, pero se debe agregar una matriz más de datos para mostrar los datos de 'fecha' cuando se desplaza. Cualquier solución óptima muy apreciada.
Este es el enlace de codesandbox: https://codesandbox.io/s/gallant-davinci-0hykv?file=/App.tsx
El componente TinyArea parece usar solo un valor numérico. Si desea mostrar la fecha correspondiente cuando se desplaza, puede usar una información sobre herramientas personalizada:
import React, { useState, useEffect } from "react"; import { TinyArea } from "@ant-design/charts"; const DemoTinyArea: React.FC = () => { var data = [264, 417, 438, 887, 309, 397, 550, 575, 563, 430, 525, 592]; var data2 = [ "2021-06-01T00:00:00", "2021-07-01T00:00:00", "2021-09-01T00:00:00", "2021-02-01T00:00:00", "2021-03-01T00:00:00", "2021-04-01T00:00:00", "2021-07-01T00:00:00", "2021-01-01T00:00:00", "2021-02-01T00:00:00", "2021-05-01T00:00:00", "2021-08-01T00:00:00", "2021-04-01T00:00:00" ]; var config = { height: 60, autoFit: false, data: data, tooltip: { customContent: (index) => { // Format the date return <div>{data2[index]}</div>; } }, smooth: true }; return <TinyArea {...config} />; }; export default DemoTinyArea;También podría considerar usar otro componente que pueda usar la fecha para el eje X.