无法访问 Highcharts 中的自定义点变量 tooltip.headerFormat

Question

我有一个 highcharts 图表，在 y-axis 中有一些值，在 x-axis 中有日期时间，但是因为我呈现的数据是季度性的，所以我想显示季度而不是工具提示上的实际日期。为此，我在 y 和 x 值旁边返回了一个名为 quarter 的键，以覆盖将在 header.

中显示的内容

我的问题是我无法在工具提示的 headerFormat 中访问此变量，但我可以使用格式化程序和 pointFormat 访问它这也在工具提示中。因为我只对更改 header 中的日期感兴趣，将其余内容保留为默认内容（因为我们有其他图表在显示月度数据时使用默认布局），这些选项是不可取的。

我无法使用 headerFormat 中的点 object 访问此键的原因是什么 {point.quarter}，因为我可以使用 [=pointFormat 访问它=14=]，或者在格式化函数中使用 this.point.quarter?

这是我的系列的片段：

[
    {
        "x": 1448928000000,
        "y": 4.1,
        "quarter": "Kvartal 4, 2015"
    },
    {
        "x": 1456790400000,
        "y": 3.8,
        "quarter": "Kvartal 1, 2016"
    },
    {
        "x": 1464739200000,
        "y": 3.3,
        "quarter": "Kvartal 2, 2016"
    },
    {
        "x": 1472688000000,
        "y": 2.9,
        "quarter": "Kvartal 3, 2016"
    },
    {
        "x": 1480550400000,
        "y": 2.6,
        "quarter": "Kvartal 4, 2016"
    },
]

这就是我的工具提示的样子：

    tooltip: {
      headerFormat: '{point.quarter} <br/>',
    },

请记住，如果我将 {point.x}、{point.y} 或 {point.key} 放在那里，它会起作用，如果我在工具提示 pointFormat 中使用 {point.quarter}，它也会起作用，相反。

此外，这里是formatter-function中this.point的内容：

category: 1590969600000
clientX: 220.81681020947
color: "#b8297c"
colorIndex: undefined
dist: 46.932525263477075
distX: 26.183189790530008
formatPrefix: "point"
graphic: f {element: path.highcharts-point, height: 8, opacity: 1, renderer: d, SVG_NS: 'http://www.w3.org/2000/svg', …}
hasImage: undefined
id: "highcharts-vexo8f6-838"
index: 18
isInside: true
isNull: false
name: undefined
negative: false
options: {x: 1590969600000, y: 15.3, quarter: 'Kvartal 2, 2020'}
percentage: undefined
plotX: 220.81681020947
plotY: 39.94999999999999
quarter: "Kvartal 2, 2020"
selected: false
series: t {group: f, markerGroup: f, dataLabelsGroup: undefined, transformGroup: undefined, eventOptions: {…}, …}
state: ""
total: undefined
touched: false
visible: true
x: 1590969600000
y: 15.3
yBottom: null
zone: 0

如果无法在 headerFormat-function 中访问这样的自定义变量，如何实现，或者如何将此变量注入工具提示 而无需 覆盖默认样式？

Answer 1

经过一些挖掘，header格式中的正确用法是 {point.point.options.quarter}，这按预期工作。我尝试过 point.point 和 point.options 的某种组合，但没有同时尝试。或者，您可以覆盖点 object 中的实际键，例如名称，然后可以使用 {point.point.name} 访问它。如果您更改 name-value，它将自动在 xAxis 日期时间上的 header 中成为先例，所以我最终只使用了这个键并完全删除了 headerFormat。

headerFormat 和 pointFormat 使用不同语法的事实对我来说似乎没有记录，但这是一个可行的解决方案。如果其他人偶然发现了这个兔子洞，我希望这对您有所帮助！

Answer 2

这是因为headerFormat第一次读取变量时没有看到新添加的属性。只有当你开始构建整个点时，它才会找到这个属性，所以你必须更深入地挖掘{point.point.name}。事实上，在文档中可以更好地描述访问扩展点选项需要更深入地挖掘对象。

Highcharts.chart('container', {
  tooltip: {
    backgroundColor: '#ffffff',
    borderWidth: 0,
    useHTML: true,
    headerFormat: '{point.y}</br>{point.name}</br>{point.quarter}</br></br>{point.point.y}</br>{point.point.name}</br>{point.point.quarter}</br>',
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
      data: [{
          x: 1448928000000,
          y: 4.1,
          quarter: "Kvartal 4, 2015",
          name: 'Custom name1'
        },
        {
          x: 1456790400000,
          y: 3.8,
          quarter: "Kvartal 1, 2016",
          name: 'Custom name2'
        },
        {
          x: 1464739200000,
          y: 3.3,
          quarter: "Kvartal 2, 2016",
          name: 'Custom name3'
        },
        {
          x: 1472688000000,
          y: 2.9,
          quarter: "Kvartal 3, 2016",
          name: 'Custom name3'
        },
        {
          x: 1480550400000,
          y: 2.6,
          quarter: "Kvartal 4, 2016",
          name: 'Custom name4'
        },
      ]
    }
  ]
});

现场演示： https://jsfiddle.net/BlackLabel/qd2t6zj3/

无法访问 Highcharts 中的自定义点变量 tooltip.headerFormat

Can't access custom point variable inside Highcharts tooltip.headerFormat

reactjs

highcharts

react-highcharts