多个图表上的共享工具提示格式不正确

Question

我在一个容器中有多个 highcharts，并希望为其使用共享工具提示。

我能够生成一个共享工具提示，但无法将其格式化为我想要的格式。

这是我的代码：

Highcharts.chart('container', {
      yAxis: [{
        title: {
          text: 'Pressure'
      },
      height: '50%',
      lineWidth: 2
  }, {
    title: {
      text: 'Temperature'
  },
  top: '50%',
  height: '50%',
  offset: 0,
  lineWidth: 2
}],
series: [{
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureIn',
    chart_pl: 'bottom',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
    yAxis: 1,
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureOut',
    chart_pl: 'bottom',
    data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
    yAxis: 1,
}],
tooltip:  {
    formatter: function () {
        return this.points.reduce(function (s, point) {
            // console.log(point.series.userOptions.val);
            return `${s}<br/>${point.series.userOptions.val}<br/>${point.series.name}: ${point.y}m`;
        }, `<b>${this.x}</b><br><br>`);
    },
    shared: true
},
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

现在我的工具提示如下所示：

x axis value

temp-one
TemperatureIn: y axis value
temp-one
TemperatureOut: y axis value
temp-two
TemperatureIn: y axis value
temp-two
TemperatureOut: y axis value

如何将我的工具提示格式化为：

x axis value

temp-one
TemperatureIn: y axis value
TemperatureOut: y axis value

temp-two
TemperatureIn: y axis value
TemperatureOut: y axis value

temp-one 和temp-two 是存储在point.series.userOptions.val 中的值。我只是不确定如何将我的工具提示格式化为那样。

Answer 1

在工具提示格式化函数中，尝试将系列名称与之前的 point 进行比较，如果不同，则仅包含它，例如：

Highcharts.chart('container', {
      yAxis: [{
        title: {
          text: 'Pressure'
      },
      height: '50%',
      lineWidth: 2
  }, {
    title: {
      text: 'Temperature'
  },
  top: '50%',
  height: '50%',
  offset: 0,
  lineWidth: 2
}],
series: [{
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 9, 6, 7, 8, 15, 6, 3, 2, 7, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-one',
    showInLegend: true,
    chart_pl: 'top',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
}, {
    type: 'spline',
    name: 'TemperatureIn',
    id: 'TemperatureIn',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureIn',
    chart_pl: 'bottom',
    data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 6, 3, 2, 4, 6, 3, 1],
    yAxis: 1,
}, {
    type: 'spline',
    name: 'TemperatureOut',
    id: 'TemperatureOut',
    val: 'temp-two',
    showInLegend: false,
    linkedTo: 'TemperatureOut',
    chart_pl: 'bottom',
    data: [2, 3, 4, 5, 6, 2, 3, 4, 5, 2, 1, 3, 5, 3, 2, 1],
    yAxis: 1,
}],
tooltip:  {
    formatter: function () {
        return this.points.reduce(function (s, point, i, points) {
            // console.log(point.series.userOptions.val);
            var series = (i == 0 || point.series.userOptions.val != points[i - 1].series.userOptions.val) ?  `${point.series.userOptions.val}<br/>` : '';
            return `${s}<br/>${series}${point.series.name}: ${point.y}m`;
        }, `<b>${this.x}</b><br><br>`);
    },
    shared: true
},
});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>