Chart.js使用浮动条形图自定义解析

x3naxklr  于 2023-01-30  发布在  Chart.js
关注(0)|答案(2)|浏览(207)

我有一个浮动条形图,它在某种程度上代表甘特:

数据集如下所示:

  1. {
  2. "labels": [
  3. "Uwe Austermühle",
  4. "Helmar Conradi",
  5. "Gero Dippel"
  6. ],
  7. "datasets": [
  8. {
  9. "data": [
  10. [
  11. "2023-01-05T17:00:00.000Z",
  12. "2023-01-08T17:00:00.000Z"
  13. ],
  14. [
  15. "2022-12-01T12:34:00.000Z",
  16. "2023-02-28T12:34:00.000Z"
  17. ],
  18. [
  19. "2023-01-24T12:39:16.202Z",
  20. "2023-02-23T12:39:00.000Z"
  21. ]
  22. ],
  23. "barPercentage": 0.5,
  24. "backgroundColor": "rgba(255, 193, 7, 0.8)"
  25. }
  26. ]
  27. }

这是一个简化的fiddle
当我试图通过一个额外的属性来扩展数据集模型时,问题就出现了,比如说,我想为每个“bar”存储一些字符串,这样当前的模型[Date, Date]就变成了这样:

  1. {
  2. range: [Date, Date],
  3. text: string,
  4. }

也就是说,我的数据集看起来像这样:

  1. {
  2. "labels": [
  3. "Uwe Austermühle",
  4. "Helmar Conradi",
  5. "Gero Dippel"
  6. ],
  7. "datasets": [
  8. {
  9. "data": [
  10. {
  11. "range": [
  12. "2023-01-05T17:00:00.000Z",
  13. "2023-01-08T17:00:00.000Z"
  14. ],
  15. "annotation": "someText"
  16. },
  17. {
  18. "range": [
  19. "2022-12-01T12:34:00.000Z",
  20. "2023-02-28T12:34:00.000Z"
  21. ],
  22. "annotation": "someText"
  23. },
  24. {
  25. "range": [
  26. "2023-01-24T12:39:16.202Z",
  27. "2023-02-23T12:39:00.000Z"
  28. ],
  29. "annotation": "someText"
  30. }
  31. ],
  32. "barPercentage": 0.5,
  33. "backgroundColor": "rgba(255, 193, 7, 0.8)",
  34. "parsing": {
  35. "yAxisKey": "range"
  36. }
  37. }
  38. ]
  39. }

然而,这给了我一个完全空的图表,正如您所看到的here

tnkciper

tnkciper1#

我认为您可以将"yAxisKey"更改为"xAxisKey",因为它是水平条(indexAxis:"y")。
此外,您可以使用标签将"y"值添加到数据中,而不是使用标签(请参阅chartjs doc:https://www.chartjs.org/docs/latest/general/data-structures.html#parsing).
数据集:

  1. datasets: [
  2. {
  3. data: [
  4. {
  5. y: "Uwe Austermühle",
  6. range: [1,2],
  7. annotation: 'test'
  8. },
  9. {
  10. y: "Helmar Conradi",
  11. range: [5,6],
  12. annotation: 'test'
  13. },
  14. {
  15. y: "Gero Dippel",
  16. range: [7,8],
  17. annotation: 'test'
  18. },
  19. ],
  20. barPercentage: 0.5,
  21. backgroundColor: "rgba(255, 193, 7, 0.8)",
  22. parsing: {
  23. xAxisKey: 'range'
  24. }
  25. }
  26. ]
  27. },
  28. options: {
  29. indexAxis: 'y',
展开查看全部
irlmq6kh

irlmq6kh2#

@user2057925的回答是完全正确的,@Hafnernuss的评论也是如此,除非这背后有深刻的原因(我无法想象--请让我知道),否则它就有资格成为一个bug:如果通过对象指定数据,则忽略条形图中的标签。
我当然不建议将以下内容作为解决问题的可行方案,但由于它可能有助于将来解决此问题,因此我想指出它是可以解决的(已修补),如果BarController#parseObjectDataBarController#parseArrayAndPrimitive执行相同的操作-此处,即添加一个|| iScale.parse(labels[i], i),以便在yAxisKey(或xAxisKey)方式失败时使用标签。因此,修补后的BarController#parseObjectData可能如下所示:

  1. parseObjectData(meta, data, start, count) {
  2. const {iScale, vScale} = meta;
  3. const {xAxisKey = 'x', yAxisKey = 'y'} = this._parsing;
  4. const iAxisKey = iScale.axis === 'x' ? xAxisKey : yAxisKey;
  5. const vAxisKey = vScale.axis === 'x' ? xAxisKey : yAxisKey;
  6. const parsed = [];
  7. const labels = iScale.getLabels();
  8. let i, ilen, item, obj;
  9. for (i = start, ilen = start + count; i < ilen; ++i) {
  10. obj = data[i];
  11. item = {};
  12. item[iScale.axis] = iScale.parse(resolveObjectKey(obj, iAxisKey) || labels[i], i);
  13. parsed.push(parseValue(resolveObjectKey(obj, vAxisKey), item, vScale, i));
  14. }
  15. return parsed;
  16. }

同样,这不是一个实用的解决方案,而是一个概念验证,这里有一个replit,它的工作原理正如@Hafnernuss所期望的那样。

展开查看全部

相关问题