在高图表的 tspan 标签内显示图像

Display image inside tspan tag of highcharts

本文关键字：显示 显示图 图像 标签 高图表 tspan      更新时间：2023-09-26

我正在使用高图表库来显示饼图，我正在尝试在图表上的标签文本之前显示图像/图标。我尝试使用在 svg 中显示图像的方式添加它，但它不起作用。因为HighCharts在标签上的OnClick操作中添加了我的图像。

format: '<image width="40" height="40" xlink:href="{point.img}" /> <span><defs>'
  +'<pattern id="{point.name}" patternUnits="userSpaceOnUse" width="100" height="100">'
    +'<image xlink:href="{point.img}" x="0" y="0" width="30" height="30" />'
  +'</pattern>'
+'</defs></span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %'

我尝试了两种方式，一种是<image/>标签，另一种是<defs>和<pattern>标签

我想显示图像，我该怎么做？ 可能吗？ 这是我的小提琴

我会使用dataLabels.useHTML标志设置为 true 的 html 标签，请参阅：

    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                enabled: true,
                useHTML: true,
                format: '<img width="40" height="40" src="{point.options.img}" /> <span> {point.name} <span style="fill:url(#{point.name}); stroke: red; stroke-width:2px;"></span>: {point.percentage:.1f} %',
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },

演示：http://jsfiddle.net/jc45j7Ln/2/

注意：由于标签以 HTML 格式呈现，因此 SVG 的工具提示将在 HTML 下呈现。在这种情况下，请参阅此问题。

相关文章：