javascript - 如何使百分比符号小于数字？

Question

我需要使“%”(百分比)符号小于数据系列标签的数字。现在它们的大小相同。在 this jsfiddle 查看我的示例代码.

目前我有这个文本渲染代码，但它以 62% 渲染所有文本；我需要挑出“%”并将其变小。

// Render the text
chart4.renderer.text(chart4.series[0].data[0].percentage + '%', 44, 85).css({
    width: circleradius * 2,
    color: '#515151',
    fontSize: '32px',
    textAlign: 'right',
    fontFamily: 'Arial',
    fontWeight: 'bold'
})

Answer 1

来自他们的 docs :

HTML IN HIGHCHARTS

Texts and labels in Highcharts are given in HTML, but as the HTML is parsed and rendered in SVG, only a subset is supported. The following tags are supported: <b>, <strong>, <i>, <em>, <br/>, <span>. Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

因此，您可以使用 <span>文本内的标记。例如

chart4.renderer.text( 
    chart4.series[0].data[0].percentage + 
    '<span style="font-size: 22px">%</span>', 44, 115).css({

并将任何支持的样式属性转换为适当的 svg 代码。