Highcharts Angular - 如何在工具提示中显示组大小

Question

我目前正在使用 dataGrouping 将图表中的数据与 x 轴上的日期进行分组。我试图在工具提示中显示组大小，如此示例（打开一行，单击“显示更多信息”，打开序列图，等待数据下载，然后开始绘图）。我刚刚向您展示的示例是用 Javascript 编写的，代码如下：

tooltip: {
                shared: true,
                split: false,
                valueDecimals: 0,
                formatter: function () {
                    var gr = this.points[0].series.currentDataGrouping;
                    if (gr !== undefined) { //grouping applied
                        const groupSize = gr.gapSize / 1000 / 60;
                        const groupSizeString = groupSize >= 60 ? groupSize / 60 + " hours" : groupSize + " minutes";
                        const pointTooltip = this.points
                            .map(x => "<span style=\"color:" + x.color + "\">●</span> " + x.series.name + ": <b>" + x.y + "</b><br/>")
                            .join("");

                        return "<span style=\"font-size: 10px\">" +
                            Highcharts.dateFormat('%Y/%b/%e %H:%M', this.x)
                            + "</span><br/>" +
                            "<span style=\"font-size: 9px\">Group Size: " + groupSizeString + "</span><br/>" +
                            pointTooltip;
                    } else { //No grouping applied
                        const pointTooltip = this.points
                            .map(x => "<span style=\"color:" + x.color + "\">●</span> " + x.series.name + ": <b>" + x.y + "</b><br/>")
                            .join("");

                        return "<span style=\"font-size: 10px\">" +
                            Highcharts.dateFormat('%Y/%b/%e %H:%M', this.x)
                            + "</span><br/>" +
                            "<span style=\"font-size: 9px\">Group Size: 5 minutes</span><br/>" +
                            pointTooltip;
                    }

                }
            },

我正在尝试将此代码转换为 Angular 的 TypeScript。问题是

this.points[0].series.currentDataGrouping

对我不起作用，我得到：属性 currentDataGrouping 在类型系列上不存在。我还没有找到其他方法来访问当前的数据分组大小。

Answer 1

在

point.dataGroup

下，您可以访问有关群组的基本信息，例如

start

和

length

。

演示：https://stackblitz.com/edit/highcharts-angular-stock-jjybiy

Answer 2

截至 2024 年 11 月，Highcharts 的 GitHub 上存在一个关于 currentDataGrouping

 对象中缺少 

Series

 类型的 

开放问题 (#21869)。

推荐的解决方案是创建一个扩展 Highcharts 内置类型的自定义接口。例如，您可以定义这样的自定义接口：

export interface SeriesWithDataGrouping extends Highcharts.Series {
  currentDataGrouping: {
    count: number;
    gapSize: number;
    higherRanks: Record<PropertyKey, unknown>;
    segmentStarts: number[];
    totalRange: number;
    unitName: 'month' | 'week' | 'day' | 'hour';
    unitRange: number;
  };
}

然后您可以在访问

SeriesWithDataGrouping

属性时使用

currentDataGrouping

。例如：

const currentGrouping = (point.series as SeriesWithDataGrouping).currentDataGrouping.unitName;