如何在 Highcharts 面积图中的工具提示中显示 xAxis 标签？答案

【问题标题】：How to show xAxis label in tooltip in a Highcharts area chart?如何在 Highcharts 面积图中的工具提示中显示 xAxis 标签？
【发布时间】：2016-10-26 06:17:18
【问题描述】：

我正在使用 xAxis 标签（不是类别）来删除左/右填充。

    xAxis: {
        //categories: data.categories
        labels: {
            formatter: function () {
                return cat[this.value];
            }
        },
        minPadding: 0,
        maxPadding: 0
    },

在工具提示中，{point.x} 向我显示数字（例如“0”），但我想要标签（例如“Jan”）。

    tooltip: {
        shared: true,
        useHTML: true,
            pointFormat: "{series.name}: {point.y:.0f} ({point.percentage:.1f}%)<br />",
            headerFormat: "<b>{point.x}</b><br><br>",
    },

如何让它显示标签？

http://jsfiddle.net/9tgjf82e/

【问题讨论】：

标签： highcharts

【解决方案1】：

您需要将点与其名称相关联，因此您需要[name, y]格式的点

然后您可以通过 headerFormat 中的point.key 访问点的名称。

示例：http://jsfiddle.net/9tgjf82e/4/

【讨论】：

这比我想象的要复杂得多（我希望它会像{point.xLabel}，谢谢！:)
您还可以发现飓风的答案很有用。它需要稍作调整来修复刻度位置，因此左/右没有填充。 jsfiddle.net/9tgjf82e/5 plotOptions.series.pointPlacement: 'on'
morganfree 你是最棒的！！现在这就是答案！ :D

【解决方案2】：

您可以在标题格式中使用point.key。

API Doc

point.key 变量包含类别名称、x 值或日期时间字符串取决于轴的类型。对于日期时间轴，point.key 可以使用 tooltip.xDateFormat 设置日期格式。

但是你需要定义你的 xAxis->categories。

xAxis: {
    categories : cat,
    labels: {
        formatter: function () {
            return cat[this.value];
         }
    }
},


tooltip: {
    shared: true,
    useHTML: true,
    pointFormat: "{series.name}: {point.y:.0f} ({point.percentage:.1f}%)<br />",
    headerFormat: "<b>{point.key}</b><br><br>",
},

Updated Fiddle

【讨论】：

谢谢，但正如我第一句话所述，我们不能使用类别，因为我们不能有任何左/右填充（即图表必须拉伸到全宽）。