无法访问Highcharts工具提示中的自定义点变量,headerFormat

jgovgodb 于 2022-11-11 发布在 Highcharts

关注(0)|答案(2)|浏览(183)

我有一个highcharts图表，y轴上有一些值，x轴上有日期时间，但是因为我展示的数据是季度的，所以我希望在工具提示上显示季度的名称，而不是实际的日期。为了实现这一点，我在y和x值旁边返回了一个名为quarter的键，以覆盖标题中显示的内容。
我的问题是我不能在工具提示的headerFormat中访问这个变量，但是我 * 可以 * 使用工具提示中的formatter和pointFormat来访问它。因为我只对更改标题中的日期感兴趣，而将其余内容保持为默认值（因为我们有其他图表在显示月度数据时使用默认布局），所以这些选项并不理想。
既然我可以在pointFormat中使用{point.quarter}访问这个键，或者在格式化程序函数中使用this.point.quarter访问这个键，那么为什么我不能在headerFormat中使用{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中访问这样的自定义变量，如何实现这一点，或者我如何将此变量注入到工具提示中，* 而不 * 覆盖默认样式？

highcharts

来源：https://stackoverflow.com/questions/70436408/cant-access-custom-point-variable-inside-highcharts-tooltip-headerformat

2条答案

按热度按时间

vc9ivgsu1#

这是因为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/

赞(0）回复(0）举报 2022-11-11

dsf9zpds2#

经过一些研究，headerFormat中正确的用法应该是{point.point.options.quarter}，这和预期的一样。我尝试了point.point和point. option的某种组合，但不是两者都有。或者，您可以覆盖point对象中的一个实际键，比如name，然后可以使用{point.point.name}访问它。如果您更改了name-value，它将自动优先于xAxisdateTime，所以我最终只使用了这个键并完全删除了headerFormat。
headerFormat和pointFormat使用不同语法的事实对我来说似乎没有文档记录，但这是一个有效的解决方案。如果其他人偶然发现这个兔子洞，我希望这能有所帮助！

赞(0）回复(0）举报 2022-11-11

我来回答

无法访问Highcharts工具提示中的自定义点变量,headerFormat

2条答案

相关问题

热门标签

最新问答