[英]Display image inside tspan tag of highcharts
我正在使用highcharts库显示饼图,试图在图表上的标签文本之前显示图像/图标。 我试图使用在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呈现。 在这种情况下,请参阅此问题 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.