我有一个浮动条形图,它在某种程度上代表甘特:
数据集如下所示:
{
"labels": [
"Uwe Austermühle",
"Helmar Conradi",
"Gero Dippel"
],
"datasets": [
{
"data": [
[
"2023-01-05T17:00:00.000Z",
"2023-01-08T17:00:00.000Z"
],
[
"2022-12-01T12:34:00.000Z",
"2023-02-28T12:34:00.000Z"
],
[
"2023-01-24T12:39:16.202Z",
"2023-02-23T12:39:00.000Z"
]
],
"barPercentage": 0.5,
"backgroundColor": "rgba(255, 193, 7, 0.8)"
}
]
}
这是一个简化的fiddle。
当我试图通过一个额外的属性来扩展数据集模型时,问题就出现了,比如说,我想为每个“bar”存储一些字符串,这样当前的模型[Date, Date]
就变成了这样:
{
range: [Date, Date],
text: string,
}
也就是说,我的数据集看起来像这样:
{
"labels": [
"Uwe Austermühle",
"Helmar Conradi",
"Gero Dippel"
],
"datasets": [
{
"data": [
{
"range": [
"2023-01-05T17:00:00.000Z",
"2023-01-08T17:00:00.000Z"
],
"annotation": "someText"
},
{
"range": [
"2022-12-01T12:34:00.000Z",
"2023-02-28T12:34:00.000Z"
],
"annotation": "someText"
},
{
"range": [
"2023-01-24T12:39:16.202Z",
"2023-02-23T12:39:00.000Z"
],
"annotation": "someText"
}
],
"barPercentage": 0.5,
"backgroundColor": "rgba(255, 193, 7, 0.8)",
"parsing": {
"yAxisKey": "range"
}
}
]
}
然而,这给了我一个完全空的图表,正如您所看到的here。
2条答案
按热度按时间tnkciper1#
我认为您可以将"yAxisKey"更改为"xAxisKey",因为它是水平条(indexAxis:"y")。
此外,您可以使用标签将"y"值添加到数据中,而不是使用标签(请参阅chartjs doc:https://www.chartjs.org/docs/latest/general/data-structures.html#parsing).
数据集:
irlmq6kh2#
@user2057925的回答是完全正确的,@Hafnernuss的评论也是如此,除非这背后有深刻的原因(我无法想象--请让我知道),否则它就有资格成为一个bug:如果通过对象指定数据,则忽略条形图中的标签。
我当然不建议将以下内容作为解决问题的可行方案,但由于它可能有助于将来解决此问题,因此我想指出它是可以解决的(已修补),如果
BarController#parseObjectData
与BarController#parseArrayAndPrimitive
执行相同的操作-此处,即添加一个|| iScale.parse(labels[i], i)
,以便在yAxisKey
(或xAxisKey
)方式失败时使用标签。因此,修补后的BarController#parseObjectData
可能如下所示:同样,这不是一个实用的解决方案,而是一个概念验证,这里有一个replit,它的工作原理正如@Hafnernuss所期望的那样。