自定义时间轴的工具提示一起显示原始值和对象

Question

我一直在尝试为我的时间轴创建自定义工具提示，但找不到一种方法来显示嵌套对象的值以及基本类型。

数据示例：

{
    id: 12345,
    start_time: "2020-03-31T16:00:40Z",
    end_time: "2020-03-31T18:30:40Z"
    created_by: {
       username: "mary_jane",
       first_name: "Mary",
       last_name: "Jane"
    },

}

代码示例：

const data = makeDataSet(dataFromAPI).mapAs({name: "id", start: "start_time", end: "end_time"});
const customTooltip = "Id: {%id}" + "\nCreated by: {%created_by}";

const chart = anychart.timeline();
const exampleChart = chart.range(data).
exampleChart.tooltip().format(customTooltip)

它显示的工具提示是这样的：

Id: 12345
Created by: [object Object] //{%created_by.username} won't display any value

应该显示的内容：

Id: 12345
Created by: mary_jane

我的数据对象有多个简单的字段 strings/number 并且可以使用字符串标记轻松显示这些字段，但这不适用于值是对象的字段。对于这些情况，可以在映射对象后使用格式化函数，如下所示：

  const data = makeDataSet(dataFromAPI).mapAs({name: "id", value: "created_by"});
  exampleChart.tooltip().format(function(this:any) {
    return (
        "Id: " + this.name +                   //undefined
        "\nCreated by: " + this.value.username //mary_jane
    })

但是如何在一个工具提示中同时显示 "id" 和 "username"？是否可以结合两种格式化方法？或者有没有办法访问字符串标记内的嵌套对象（尝试了多种方法，包括模板字符串）？也许是一种在格式化函数中包含字符串标记的方法（看起来我只能访问 "value" 所以添加更多键不起作用）？也许我应该改变我的映射？任何帮助将不胜感激！

[我正在使用 React + TypeScript，AnyChart 版本：8.7.1]

Answer 1

字符串标记不支持数组或对象等复杂结构，仅支持点属性中的基元。这是简单格式化的不错选择。但是您可以使用格式化程序回调函数来实现所需的工具提示。格式化程序上下文提供 API 来获取您需要的任何数据字段：getData()、getMeta()。我准备了一个描述如何实现所需工具提示的示例 - https://playground.anychart.com/bvKyAFu6

自定义时间轴的工具提示一起显示原始值和对象

Custom Timeline's tooltip to display primitive values and objects together

anychart