如何添加数据的第二个数组TinyArea图在和?

Question

在React项目中，绘制类似于图形的数字数据，当将数据悬停在图形上时，该数据显示在特定点上。这里的数字数据是在数组格式，但是，我需要添加数据的第二个数组显示相应的"日期"到该数据。有合适的解决方案吗?

下面是引用 的代码

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} />;
};

从上面的代码中可以看出，绘制了一个数据数组，但是，当鼠标悬停时，还需要附加一个数据数组来显示'date'数据。任何最优的解决方案都是值得赞赏的。

这是codesandbox link: https://codesandbox.io/s/gallant-davinci-0hykv?file=/App.tsx

Answer 1

TinyArea组件似乎只使用一个数值。如果想在鼠标悬停时显示相应的日期，可以使用自定义工具提示:

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;

您还可以考虑使用另一个可以使用日期作为x轴的组件。