highcharts svg元素与内联样式工具提示

zz2j4svz  于 2023-11-19  发布在  Highcharts
关注(0)|答案(1)|浏览(139)

我想给我用renderer函数创建的SVG元素添加一个工具提示。工具提示文本应该部分加粗。不幸的是,下面的代码不起作用-单词没有加粗。

var circle = renderer.circle(100, 100, 50)
  .attr({
    fill: 'red',
    stroke: 'black',
    'stroke-width': 2,
    title: 'This is the partially <b>bold</b> Tooltip for the circle'
  })
  .add();

字符串
JsFiddle:https://jsfiddle.net/martindfurrer/bm1djhpw/10/

yhuiod9q

yhuiod9q1#

圆圈的标题并不是特别的Highcharts的东西,而只是svg标签,我不确定是否可以将其加粗https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title;
当涉及到第二种方法时-使用渲染器创建的circle没有像系列中的数据点那样的内置工具提示属性。您需要创建自定义工具提示:

events: {
  load: function () {
    const renderer = this.renderer;
    const series = this.series[0];

    series.circle = renderer.circle(100, 100, 50)
      .attr({
        fill: 'red',
        stroke: 'black',
        'stroke-width': 2,
      })
      .add();

    series.circle.on('mouseover', function () {
      if (!series.customTooltip) {
        series.customTooltip = renderer.label(
          'This is the partially <b>bold</b> tooltip for the circle',
          series.circle.x,
          series.circle.y
        ).add();
      }
      series.customTooltip.show();
    });

    series.circle.on('mouseout', function () {
      if (series.customTooltip) {
        series.customTooltip.destroy();
        series.customTooltip = null;
      }
    });
  }
}

字符串
演示:https://jsfiddle.net/BlackLabel/hd01y3j7/
我不确定你的具体要求,但你也可以考虑使用一个点来实现类似的结果:
演示:https://jsfiddle.net/BlackLabel/7kma8tsb/

相关问题