Javascript 使用chartjs在React中创建可滚动的折线图

我将在React中创建一个可滚动的图表，其中有一个相互交互的缩略图列表。 要求如下

• 创建可滚动的折线图（但不会显示滚动）
• 使用滚动键在折线图下创建缩略图
• 当缩略图列表移动时，必须更改折线图（它有一个滚动条）

我使用ChartJS2.9.0，因为它很容易定制，并且具有我想要的功能。 我希望这段代码能帮助那些想使用滚动图表的人。 现在，这段代码同时绘制了可滚动的线条图和条形图

import React，{useState，useffect}来自“React”；
从“Chart.js”导入图表；
从“/Thumbnails”导入缩略图；
从“./图表/控制组”导入控制组；
从“./../utils/constants”导入{ITEMS\u PER\u SCREEN，MAX\u COUNT}；
常量滚动图表=({
类型，
友善的
资源，
颜色列表，
}) => {
const[eleWidth，setEleWidth]=useState（null）；
const[selectedImage，setSelectedImage]=useState（null）；
//常量[filterData，setFilterData]=useState（资源）；
常量filterData=资源；
常量addData=（numData，图表）=>{
for（设i=0；i{
常量标签=[]；
对于（设i=0；i{
常数数据={
标签：[]，
数据集：[]，
};
常量索引数组=Object.keys（filterData）；
data.labels=generateLabel（）；
如果（类型=“条形”）{
for（设i=0；i{
设矩形集=false；
const canvasTest=document.getElementById（`${kind}-Chart`）；
常量图表测试=新图表（CANWAST{
类型：类型，
数据：generateData（Object.keys（filterData）.length），
选项：{
MaintaintAspectRatio:false，
标题：{
显示：假，
},
图例：{
显示：假，
},
工具提示：{
标题字体：15，
标题：10，
车身尺寸：10，
},
比例：{
雅克斯：[
{
id:`${kind}-yAxis`，
网格线：{
显示：对，
zeroLineColor:#A9B0C3“，
颜色：“A9B0C3”，
borderDash:[6,4]，
边框颜色：“A9B0C3”，
线宽：2，
},
滴答声：{
建议分钟：0，
建议最大值：100，
主修：{
启用：false，
},
步长：20，
回调：函数（值）{
返回值！==0？值+“%：”；
},
},
错,，
},
],
xAxes：[
{
id:`${kind}-xAxis`，
网格线：{
显示：类型==“条”？真：假，
颜色：“A9B0C3”，
线宽：2，
},
滴答声：{
回调：函数（值）{
返回值！==0？值+“''”：值；
},
},
对,，
},
],
},
动画：{
onComplete:函数（）{
设定宽度(
document.getElementById（`${kind}ChartWrapper`）.offsetWidth/
每个屏幕上的项目
);
如果（！矩形集）{
var scale=window.devicePixelRatio；
var sourceCanvas=chartTest.chart.canvas；
var copyWidth=chartTest.scales[`${kind}-yAxis`].width；
变量copyHeight=
chartTest.scales[`${kind}-yAxis`]高度+
chartTest.scales[`${kind}-yAxis`].top+
10;
var targetCtx=文档
.getElementById（`${kind}轴图表`）
.getContext（“2d”）；
targetCtx.刻度（刻度，刻度）；
焦油