在Highcharts中更改系列的工具提示形状

f5emj3cl  于 2023-04-12  发布在  Highcharts
关注(0)|答案(2)|浏览(183)

我正在向我的Highcharts图表添加一个系列。我正在尝试使该特定系列的工具提示具有特定的形状。我知道您可以更改整个图表的工具提示形状,但我希望每个系列都有一个特定的工具提示形状。如何完成此操作?
PS:这不管用:

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

xqnpmsa81#

API states只使用了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重新创建,因为形状只能在创建标签时更改。

c86crjj0

c86crjj02#

我也遇到了同样的问题。我的想法是在serie工具提示的PointFormat选项中使用unicode符号:

const serie: Highcharts.SeriesLineOptions = {
        name: 'Custom Tooltip Serie',
        ...,
        tooltip: {
            pointFormat: '▲ {series.name}: <b>{point.y}</b><br/>'
        }
    };

相关问题