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

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

在工具提示格式化程序 function 中，尝试将系列名称与上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>