0

我正在尝试连接 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, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(255, 82, 82, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)'
                                ],
                            borderWidth: 2,
                            backgroundColor: 'rgba(46, 111, 255, 0)',
                            pointBackgroundColor: 'rgba(255, 255, 255, 1)',
                            pointStyle: 'circle',
                            pointRadius: 5,
                            lineTension: 0
                        },
                            {
                            label: 'Forecast +',
                            data: 
                                [
                                null, null, null, null, null,
                                null, null, null, -12820000, 22900000,
                                25710000, 9330000, -31040000, 27999000, -11190000
                                ],
                            borderColor: 
                                [
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(46, 111, 255, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)', 'rgba(46, 111, 255, 1)',
                                'rgba(255, 82, 82, 1)'
                                ],
                            borderDash: [40],
                            borderDashOffset: 100,
                            borderWidth: 2,
                            backgroundColor: 'rgba(255, 82, 82, 0)',
                            pointBackgroundColor: 'rgba(255, 255, 255, 1)',
                            pointStyle: 'rect',
                            pointRadius: 5,
                            borderDash: [12],
                            lineTension: 0
                        }
                       }}
                  />

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

在此处输入图像描述

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

近一个星期以来,我一直在努力解决这个问题.. 任何帮助都将不胜感激。

4

1 回答 1

1

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

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

于 2021-03-31T15:22:59.367 回答