我正在向我的Highcharts图表添加一个系列。我正在尝试使该特定系列的工具提示具有特定的形状。我知道您可以更改整个图表的工具提示形状,但我希望每个系列都有一个特定的工具提示形状。如何完成此操作?PS:这不管用:
chart.addSeries({ ...stuff... tooltip: { shape: "triangle-down" } });
xqnpmsa81#
API states只使用了Series.tooltip选项中的一个属性子集。shape属性不是其中之一。然而,解决这个问题的一种方法是扩展Tooltip.refresh函数来完全重绘工具提示,并在那里提供shape参数。例如:
Series.tooltip
shape
Tooltip.refresh
$(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重新创建,因为形状只能在创建标签时更改。
pointOrPoints.series.tooltipOptions.shape
tooltip.shape
tooltip.refresh
c86crjj02#
我也遇到了同样的问题。我的想法是在serie工具提示的PointFormat选项中使用unicode符号:
const serie: Highcharts.SeriesLineOptions = { name: 'Custom Tooltip Serie', ..., tooltip: { pointFormat: '▲ {series.name}: <b>{point.y}</b><br/>' } };
2条答案
按热度按时间xqnpmsa81#
API states只使用了
Series.tooltip
选项中的一个属性子集。shape
属性不是其中之一。然而,解决这个问题的一种方法是扩展Tooltip.refresh
函数来完全重绘工具提示,并在那里提供shape
参数。例如:
这显示了覆盖
Tooltip.refresh
,然后使用pointOrPoints.series.tooltipOptions.shape
获取特定系列的tooltip.shape
。请注意,这将占用更多资源,因为工具提示将为每个tooltip.refresh
重新创建,因为形状只能在创建标签时更改。c86crjj02#
我也遇到了同样的问题。我的想法是在serie工具提示的PointFormat选项中使用unicode符号: