Highchart 工具提示 PointOptionsObject 接口实现答案

【问题标题】：Highchart tooltip PointOptionsObject interface implementationHighchart 工具提示 PointOptionsObject 接口实现
【发布时间】：2019-12-16 01:34:35
【问题描述】：

除了 x、y 和 z 之外，我正在为 Highchart 传递额外的字段（例如：颜色、data_status、data_oos、data_soc 和 data_status_cd）。

x: timestamp,
y: soc,
z: duration,
color: color,
data_status: state,
data_oos: oosFg,
data_soc: soc,
data_status_cd: errorCode

我的意图是在 Highchart 工具提示格式化程序函数中使用这些自定义值。我在https://api.highcharts.com/class-reference/Highcharts.PointOptionsObject 中找不到用于打字稿的 Highchart PointOptionsObject 的清晰实现示例。有没有办法访问这些值？下面是我正在尝试使用的格式化程序功能的一部分。

tooltip: {
          //useHTML: true,
          formatter: function() {
            var point = this.point,
            series = this.series,
            pointIndex = point.index,
            oos = point.options.data_oos,
            status = point.options.data_status,
            soc = point.options.data_soc,
            status_code = point.options.data_status_cd;

            const text = "<strong>Charging: " + status_code + " " + "| Out of Service</strong>";
            return text;
}

【问题讨论】：

您能否将您的代码复制到我可以使用的在线编辑器中？

标签： angular typescript highcharts tooltip

【解决方案1】：

我可以通过实现我自己的由 PointOptionsObject 继承的自定义接口来做到这一点。

    interface Custom extends Highcharts.PointOptionsObject {
            data_state: number;
            data_oos: boolean;
            data_soc: number;
            data_status_cd: number;
            z: number;
            timeZone: string;
}

然后我创建了一个 Custom 对象并将其设置为 Point 数据的 options 标志，我可以从 tooltop 点再次访问该标志如下。

        tooltip: {
                //useHTML: true,
                formatter: function() {
                    var custom = this.point.options as Custom; 
                    var [state, oos, statusCode, soc, text] = ["Not Connected", "", "", "", ""];
                statusCode = (custom.data_status_cd !== null) ? (": " + custom.data_status_cd + " ") : "";
...

    }

【讨论】：