Изменение формы всплывающей подсказки для серии в Highcharts

Question

Я добавляю серию в свой график Highcharts.Я пытаюсь придать всплывающей подсказке определенной серии определенную форму.Я знаю, что вы можете изменить форму всплывающей подсказки для всей диаграммы, но я хочу, чтобы у каждой серии была определенная.Как мне это сделать.

PS Это не работает:

chart.addSeries({
     ...stuff...
     tooltip: {
          shape: "triangle-down"
     }    
 });

Answer 1

API заявляет , что из параметров Series.tooltip используется только подмножество свойств.Атрибут shape не является одним из них.Однако один из способов обойти это - расширить функцию Tooltip.refresh, чтобы выполнить полную перерисовку всплывающей подсказки, и указать аргумент shape.

Например:

$(function() {
        (function (H) {
            H.wrap(H.Tooltip.prototype, 'refresh', function (proceed, pointOrPoints, mouseEvent) {
                this.update({ shape: pointOrPoints.series.tooltipOptions.shape });
                return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
            });
        }(Highcharts));


        Highcharts.chart('container', {
            tooltip: {
                shape: 'triangle-down', // Global shape
            },

            series: [{
                tooltip: {
                    shape: 'diamond' // Specific shape for series
                },
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }, {
                tooltip: {
                    shape: 'circle' // Specific shape for series
                },
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
            }, {
                tooltip: {
                    shape: 'square' // Specific shape for series
                },
                data: [0, 0, 7988, 12169, 15112, 22452, 34400, 34227]
            }, {
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
            }],

        });
    });

#container {
	min-width: 310px;
	max-width: 800px;
	height: 400px;
	margin: 0 auto
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

Это показывает переопределение Tooltip.refresh и затем использование pointOrPoints.series.tooltipOptions.shape для извлечения tooltip.shape для определенной серии.Обратите внимание, что это будет более ресурсоемким, поскольку всплывающая подсказка создается заново для каждого tooltip.refresh, поскольку форму можно изменять только после создания метки.