Chart.js 带有浮动条形图的自定义解析

Question

我有一个浮动条形图，有点代表甘特图：

数据集如下所示：

{
    "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)"
        }
    ]
}

这是一个简化的小提琴。

当我尝试通过附加属性扩展数据集 model 时出现问题。 比方说，我想为每个“栏”存储一些字符串，以便当前的 model [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"
            }
        }
    ]
}

然而，这给了我一个完全空的图表，正如你在这里看到的那样。 我究竟做错了什么？

Answer 1

我认为您可以将“yAxisKey”更改为“xAxisKey”，因为它是水平条（indexAxis：“y”）。

此外，您可以使用 label 将“y”值添加到数据中，而不是使用标签（请参阅 chartjs 文档： 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',

Answer 2

@user2057925 的回答以及@Hafnernuss 的评论是完全正确的，除非这背后有深层次的原因（我无法想象 - 请让我知道）它有资格作为错误：如果指定数据，条形图中的标签将被忽略通过 object。

我当然不建议将以下内容作为相关案例的可行解决方案，但由于将来解决此问题可能会有所帮助，我会提到它可以在源代码中解决（修补），如果BarController#parseObjectData与BarController#parseArrayAndPrimitive的作用相同 - 在这里，即添加一个|| iScale.parse(labels[i], i) || 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 的正确预期工作。