javascript 如何在highcharts图形的右下角添加带有工具提示的图标?

sgtfey8w  于 2023-05-21  发布在  Java
关注(0)|答案(2)|浏览(118)

我使用的是下图中的highcharts。我想在图表的右下角添加一个带有工具提示的信息图标(屏幕截图中的红色方块)。

Here is the sandbox link: http://jsfiddle.net/BlackLabel/smkcd39v/

我曾尝试使用注解来实现这一点,但它没有帮助。

toiithl6

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

0aydgbwb2#

您可以使用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-drawing
API引用:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#image
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

相关问题