Question

我在我的Highcharts图表中添加了一个系列。我试图制作这个特定的系列节目＆＃39;工具提示有一定的形状。我知道您可以更改整个图表的工具提示形状，但我希望每个系列都有一个特定的系列。我该如何做到这一点。

P.S。这不起作用：

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

Answer 1

API states仅使用Series.tooltip选项中的一部分属性。 shape属性不是其中之一。但是，解决此问题的一种方法是扩展Tooltip.refresh函数以完全重绘工具提示，并在那里提供shape参数。

例如：

＆＃13;

$(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]
            }],

        });
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

这会显示覆盖Tooltip.refresh，然后使用pointOrPoints.series.tooltipOptions.shape获取特定系列的tooltip.shape。请注意，由于每个tooltip.refresh都会重新创建工具提示，因此这会占用大量资源，因为只能在创建标签时更改形状。

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

1 个答案: