Javascript 如何创建具有多个条的charjs条形图？

我想得到这样的效果：

下面是我作为组合图的最佳尝试：

问题是我需要大幅增加图表中的条数。然而，当我尝试这样做的时候，酒吧消失了

以下是我作为typescript reactjs设置的代码：

import'/App.css'；
从“React”导入React；
从'react-chartjs-2'导入{Bar，Line}；
const createRandomFollowersData=（）=>{
const maxDate=新日期（）；
const minDate=新日期（maxDate.valueOf（）-5*365*24*60*60*1000）；
const dataPoints=Array.from（{length:500}）.map（（）=>({
时间戳：新日期(
floor（Math.random（）*（maxDate.valueOf（）-minDate.valueOf（））+
minDate.valueOf（）的
).toISOString（），
追随者：Math.floor（Math.random（）*1000000）+0，
}));
返回dataPoints.sort(
（a，b）=>新日期（a.timestamp）.valueOf（）-新日期（b.timestamp）.valueOf（）
);
};
常量createRandomAssetData=（）=>{
const maxDate=新日期（）；
const minDate=新日期（maxDate.valueOf（）-5*365*24*60*60*1000）；
const dataPoints=Array.from（{length:500}）.map（（）=>({
时间戳：新日期(
floor（Math.random（）*（maxDate.valueOf（）-minDate.valueOf（））+
minDate.valueOf（）的
).toISOString（），
价格：Math.floor（Math.random（）*45）+1，
}));
返回dataPoints.sort(
（a，b）=>新日期（a.timestamp）.valueOf（）-新日期（b.timestamp）.valueOf（）
);
};
const followersData=createRandomFollowersData（）；
常数yaxis={
类型：'线性'，
id:'追随者'，
};
常数yAxisDelta={
类型：'线性'，
位置：'右'，
id:'更改'，
};
常数yAxisRank={
类型：'线性'，
id:'排名'，
滴答声：{
相反：是的，
},
};
常量Yaxis资产={
类型：'线性'，
位置：'右'，
id:'资产'，
};
常量selectChartAxes=(
包含以下内容：布尔值，
containsRank:boolean，
showDelta:boolean，
showAssets:布尔值
) => {
常数yAxes=[]；
if（包含以下内容）yAxes.push（yAxisFollowers）；
if（containsRank）yAxes.push（yAxisRank）；
if（showDelta）yax.push（yAxisDelta）；
if（showAssets）yAxes.push（yaxissets）；
返回雅克斯；
};
常量抽取图=(
数据：{
t：日期；
y：数字；
}[],
numBuckets:数字，
开始日期：日期，
结束日期？：日期
) => {
如果（！开始日期）{
startDate=数据[0].t；
}
如果（！endDate）{
endDate=data[data.length-1].t；
}
//创建间隔均匀的日期
const dt=endDate.valueOf（）-startDate.valueOf（）；
常量startValue=startDate.valueOf（）；
const spacedDates=Array.from（{length:numBuckets+1}）.map（（x，idx）=>{
返回新日期（起始值+（idx*dt）/numBuckets）；
});
//做水桶
const bucket=Array.from（{length:numBuckets+2}）。映射（（）=>[]）为{
t：日期；
y：数字；
}[][];
常量filteredData=data.filter(
（e） =>e.t>=spacedDates[0]&&e.t{
对于（；jdx=spacedDates[idx]&&date{
const date=spacedDates[idx]；
如果（bucket.length==0）{
返回{
t:日期，
y:楠，
};
}
返回铲斗[铲斗长度-1]；
});
};
const chartMappedFollowersData=followersData.map（（followerData）=>({
t：新日期（以下为数据时间戳），
y:followerData.followers，
}));
//常量抽取数据=抽取图（chartMappedFollowersData，75）；
const decimatedData=抽取图（chartMappedFollowersData，75）.map(
（e，idx）=>{
如果（idx>1&&idx<10）{
返回{
t:e.t，
y:楠，
};
}
如果（idx>30&&idx<45）{
返回{
t:e.t，
y:楠，
};
}
返回e；
}
);
常量抽取达塔托巴=(
数据：{
t：日期；
y：数字；
}[]
) => {
如果（数据长度<2）{
返回{
t:数据[0].t，
y:数据[0]。y，
};
}
常数条=[]；
const indexedData=data.map（（e，idx）=>({
E
idx，
}));
常量filteredIndexedData=indexedData.filter（（e）=>！isNaN（e.y））；
for（设idx=0；idxe.t）.filter（（uux，idx）=>idx%3==0），
数据集：[
{
yAxisID：“追随者”，
CubicinInterpolationMode:“单调”，
背景颜色：“rgb（54162235）”，
边框颜色：“rgb（88,88,88）”，
填充：假，
键入：“行”，
标签：“追随者”，
斯潘：是的，
数据：抽取数据，
},
{
yAxisID:'更改'，
类型：'bar'，
背景颜色：“rgb（235，54，162）”，
标签：'delta'，
数据：decimatedDataToBars（decimatedData），
巴特希克内斯：1，
},
],
};
函数App（）：JSX.Element{
返回(
);
}
导出默认应用程序；

如果将数据：decimatedDataToBars（decimatedData）调出