微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决Chart JS - 有没有办法在折线图中连接两个数据集?

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

Line Chart

我想像这样连接它:

enter image description here

这是我的代码

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

enter image description here

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

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

解决方法

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。