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

Question

我在一个容器中有多个高级图表，并希望为此使用一个共享工具提示。

我能够生成一个共享的工具提示，因为我无法按照我想要的方式格式化它。

这是我的密码：

​

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>

​