Chart JS - 有没有办法在折线图中连接两个数据集?
Chart JS - Is there a way to connect two datasets in a line chart?
我正在尝试连接 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 个值(可以理解)
我只是在寻找替代方案,如果我可以在不这样做的情况下连接这 2 个数据集。
近一个星期以来,我一直在努力解决这个问题。非常感谢您的帮助。
您可以使用自定义插件在 canvas 上自己画线:https://www.chartjs.org/docs/latest/developers/plugins.html
您也可以使用注释插件为您画线:https://github.com/chartjs/chartjs-plugin-annotation
我正在尝试连接 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 个值(可以理解)
我只是在寻找替代方案,如果我可以在不这样做的情况下连接这 2 个数据集。
近一个星期以来,我一直在努力解决这个问题。非常感谢您的帮助。
您可以使用自定义插件在 canvas 上自己画线:https://www.chartjs.org/docs/latest/developers/plugins.html
您也可以使用注释插件为您画线:https://github.com/chartjs/chartjs-plugin-annotation