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

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

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

数据集如下所示:

{
    "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

tnkciper

tnkciper1#

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

datasets: [
          {
              data: [
                  {
                      y: "Uwe Austermühle",
                      range: [1,2],
                      annotation: 'test'
                  },
                  {
                      y: "Helmar Conradi",
                      range: [5,6],
                      annotation: 'test'
                  },
                  {
                      y: "Gero Dippel",
                      range: [7,8],
                      annotation: 'test'
                  },
              ],
              barPercentage: 0.5,
              backgroundColor: "rgba(255, 193, 7, 0.8)",
              parsing: {
                xAxisKey: 'range'
              }
          }
      ]
  },
  options: {
    indexAxis: 'y',
irlmq6kh

irlmq6kh2#

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

parseObjectData(meta, data, start, count) {
        const {iScale, vScale} = meta;
        const {xAxisKey = 'x', yAxisKey = 'y'} = this._parsing;
        const iAxisKey = iScale.axis === 'x' ? xAxisKey : yAxisKey;
        const vAxisKey = vScale.axis === 'x' ? xAxisKey : yAxisKey;
        const parsed = [];
        const labels = iScale.getLabels();
        let i, ilen, item, obj;
        for (i = start, ilen = start + count; i < ilen; ++i) {
            obj = data[i];
            item = {};
            item[iScale.axis] = iScale.parse(resolveObjectKey(obj, iAxisKey) || labels[i], i);
            parsed.push(parseValue(resolveObjectKey(obj, vAxisKey), item, vScale, i));
        }
        return parsed;
   }

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

相关问题