Highcharts 图例 div 未呈现并由 tspan 替换

Question

我正在尝试使用回调更新图例，因为我正在使用带有 api 的 highchartserver，这是调用此服务的自定义图例的唯一方法。

这是一个例子

$(function () {
    $('#container').highcharts({
    
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
    
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    
    }, function(chart) { // on complete
     
        
    chart.legend.update({enabled:true,useHtml:true,symbolRadius:0,symbolHeight:0,symbolWidth:0, squareSymbol:false});

    chart.series[0].update({name:
    '<div style="display:flex;align-items:center"><div style="margin-right:5px;width:10px;height:10px;border-radius:5px;background-color:#00ffff;"></div><span style="margin-right:10px">'+chart.series[0].name+' - 90%</span><div style="margin-right:5px;width:10px;height:10px;border-radius:5px;background-color:#00ffff;"></div><span style="margin-right:10px">'+chart.series[0].name+' - 70%</span><div style="margin-right:5px;width:10px;height:10px;border-radius:5px;background-color:#ff00f5;"></div><span style="margin-right:10px">'+chart.series[0].name+' - 50%</span></div>'
    }); 
    
})});

我不明白为什么我的 div 会被 tspan 替换，我该如何避免这种行为？

Answer 1

在 Highcharts 文档中我们可以阅读：

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: , , , ,  , . Spans can be styled with a style attribute, but only text-related CSS that is shared with SVG is handled.

Most places where text is handled in Highcharts, it is also followed by an option called useHTML. When this is true, the text is laid out as HTML on top of the chart. This allows for full HTML support and can be a good idea if you want to add images in your labels, tables in your tooltip etc. (...)

因此，您需要为 legend 启用 useHTML:

legend: {
  useHTML: true
}

现场演示： http://jsfiddle.net/BlackLabel/ad975ru3/

文档： https://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting

API参考：https://api.highcharts.com/highcharts/legend.useHTML

Highcharts 图例 div 未呈现并由 tspan 替换

Highcharts legend div not rendered and replaced by tspan

highcharts