我使用的是下图中的highcharts。我想在图表的右下角添加一个带有工具提示的信息图标(屏幕截图中的红色方块)。
Here is the sandbox link: http://jsfiddle.net/BlackLabel/smkcd39v/
我曾尝试使用注解来实现这一点,但它没有帮助。
toiithl61#
看看这个https://jsfiddle.net/subeeshamie/Lko3cw02/5/
Highcharts.chart('container', { credits: { text: '<div class="hover-text">ⓘ <span class="tooltip-text" > a tooltip!</span></div>', href: '#', style:{ fontSize: '1.2em', color:'black' } }, series: [{ type: 'column', data: [1, 2, 3], point: { events: { click: function() { var chart = this.series.chart; chart.selectedIndex = this.x; chart.redraw(false); } } } }], xAxis: { type: 'category', labels: { useHTML: true, formatter: function() { if (this.chart.selectedIndex === this.pos) { return '<img src="https://www.highcharts.com/samples/graphics/sun.png" height="40" width="40">'; } return this.value; } } } });
#container { min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto } .tooltip-text { visibility: hidden; position: absolute; z-index: 1; width: 100px; font-size: 15px; fill:red !important; } .hover-text:hover .tooltip-text { visibility: visible; } .hover-text { position: relative; display: inline-block; margin: 40px; font-family: Arial; text-align: center; }
<script src="https://code.highcharts.com/highcharts.js"></script> <div id="container"></div>
0aydgbwb2#
您可以使用Highcharts.SVGRenderer类添加带有工具提示的图像。例如:
Highcharts.SVGRenderer
events: { render: function() { const size = 40; const x = this.chartWidth - size; const y = this.chartHeight - size; if (!this.customImg) { this.customImg = this.renderer.image( "https://w7.pngwing.com/pngs/487/562/png-transparent-sun-logo-sunlight-silhouette-thumbnail.png", null, null, 40, 40 ).add(); this.customTooltip = this.renderer.label('Some tooltip', null, null, 'callout') .css({...}) .attr({...}) .hide() .add(); this.customImg.on('mouseover', () => { this.customTooltip.show(); }); this.customImg.on('mouseout', () => { this.customTooltip.hide(); }); } this.customTooltip.attr({ x: x + size, y: y - size, anchorX: x + size / 2, anchorY: y }); this.customImg.attr({ x, y }); } }
现场演示:http://jsfiddle.net/BlackLabel/xq50skfa/文档:https://www.highcharts.com/docs/advanced-chart-features/freeform-drawingAPI引用:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#imagehttps://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label
2条答案
按热度按时间toiithl61#
看看这个
https://jsfiddle.net/subeeshamie/Lko3cw02/5/
0aydgbwb2#
您可以使用
Highcharts.SVGRenderer
类添加带有工具提示的图像。例如:
现场演示:http://jsfiddle.net/BlackLabel/xq50skfa/
文档:https://www.highcharts.com/docs/advanced-chart-features/freeform-drawing
API引用:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label