Chart JS - 有没有办法在折线图中连接两个数据集？

问题描述

我正在尝试连接 Chart 数据集中的两个数据，但我不知道如何连接，目前我的图表如下所示：

我想像这样连接它：

这是我的代码：

                  <Line
                       type={'line'}
                       data={{
                       labels: [dtOne,dtTwo,dtThree,dtFour,dtFive,dtSix,dtSeven,'Today',dtEight,dtNine,dtTen,dtEleven,dtTwelve,dtThirteen,dtFourteen],datasets: [
                            {
                            label: 'Cash Net +',data: 
                                [
                                22230000,31150000,28300000,2640000,27510000,-9011000,26810000,13970000
                                ],borderColor: 
                                [
                                'rgba(46,111,255,1)','rgba(46,'rgba(255,82,1)'
                                ],borderWidth: 2,backgroundColor: 'rgba(46,0)',pointBackgroundColor: 'rgba(255,pointStyle: 'circle',poinTradius: 5,lineTension: 0
                        },{
                            label: 'Forecast +',data: 
                                [
                                null,null,-12820000,22900000,25710000,9330000,-31040000,27999000,-11190000
                                ],borderDash: [40],borderDashOffset: 100,backgroundColor: 'rgba(255,pointStyle: 'rect',borderDash: [12],lineTension: 0
                        }
                       }}
                  />

我尝试将相同的值放在第二个数据集（来自第一个数据集）的最后一个空值上，我能够连接线，但问题是每当我单击该特定点时，我都会得到 2 个值（这是可以理解的)

我只是在寻找替代方案，如果我可以在不这样做的情况下连接这两个数据集。

近一个星期以来，我一直在努力解决这个问题......感谢任何帮助。

解决方法

您可以使用自定义插件在画布上自己绘制线条：https://www.chartjs.org/docs/latest/developers/plugins.html

您也可以使用注释插件为您画线：https://github.com/chartjs/chartjs-plugin-annotation