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

Question

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

我想这样连接它：

这是我的代码：

                  <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 个值（这是可以理解的）

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

我已经尝试解决这个问题近一周了..感谢任何帮助。

Answer 1

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

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

Answer 2

我使用了以下解决方法（使用两个数据集和图表.js 的 v.4.4.1）：

• 将第一个数据集的最后一个值添加为第二个数据集的第一个值。
• 然后我遇到了与上面描述的相同的问题（该值在工具提示中重复），但我可以删除第二个数据集的第一个值的工具提示。请参阅下面第二个数据集的代码（在我的例子中，它始终只有两个元素）。
• 在选项中将 intersect 设置为 true 非常重要（见下文），以便能够隐藏工具提示。

{
label: '2nd dataset',
data: this.secondDataset,
borderColor: 'rgba(255, 99, 71, 1)',
pointBackgroundColor: 'rgba(255, 99, 71, 1)',
// Below properties are set to 0 for the first element so that the tooltip doesn't appear
pointRadius: [0, 4],
pointHitRadius: [0, 4]
}

options: {
    radius: 4,
    interaction: {
        intersect: true // Needs to be set to true to use pointRadius and pointHitRadius above
    }
}