将网站图标放在 Highchart 中间

Question

我试图在不同的网站上找到我的问题的解决方案，但找不到。

我正在使用 highcharts 显示漂亮的图表（参见下图）。

Beautiful chart

我想在此图表的圆圈中间添加一个图标（Font awesome web 应用程序图标）。

我找到了一个示例（参见下图），其中在其中心添加了一些文本。

Chart with text in it.

显示此图表的代码如下：

/* Renders a pie chart using the provided chartops */
var renderPieChart = function (chartopts) {
    return Highcharts.chart(chartopts['elemId'], {
        chart: {
            type: 'pie',
            events: {
                load: function () {
                    var chart = this,                                                                     
                        rend = chart.renderer,                                                            
                        pie = chart.series[0],                                                            
                        left = chart.plotLeft + pie.center[0],                                            
                        top = chart.plotTop + pie.center[1];                                              
                    this.innerText = rend.text(chartopts['data'][0].y, left, top).                        
                    attr({                                                                                
                        'text-anchor': 'middle',                                                          
                        'font-size': '24px',                                                              
                        'font-weight': 'bold',                                                            
                        'fill': chartopts['colors'][0],                                                   
                        'font-family': 'Helvetica,Arial,sans-serif'                                       
                    }).add();                                                                             
                },                                                                                        
                render: function () {                                                                     
                    this.innerText.attr({                                                                 
                        text: chartopts['data'][0].y                                                      
                    })                                                                                    
                }                                                                                         
            }                                                                                             
        },                                                                                                
        title: {                                                                                          
            text: chartopts['title']                                                                      
        },                                                                                                
        plotOptions: {                                                                                    
            pie: {                                                                                        
                innerSize: '80%',                                                                         
                dataLabels: {                                                                             
                    enabled: false                                                                        
                }                                                                                         
            }                                                                                             
        },                                                                                                
        credits: {                                                                                        
            enabled: false                                                                                
        },                                                                                                
        tooltip: {                                                                                        
            formatter: function () {                                                                      
                if (this.key == undefined) {                                                              
                    return false                                                                          
                }                                                                                         
                return '<span style="color:' + this.color + '">\u25CF</span>' + this.point.name + ': <b>' + this.y + '</b><br/>'   
            }
        },  
        series: [{                                                                                        
            data: chartopts['data'],                                                                      
            colors: chartopts['colors'],                                                                  
        }]
    })
}

我必须在此代码中更改什么才能添加图标？

谢谢，

Cycl0pe

Answer 1

您所要做的就是导入 CSS 并使用 SVGRenderer.text（启用 useHTML）：

  load: function() {
    this.renderer.text("<i style='font-size:24px' class='fa'>&#xf2b9;</i>", 290, 220, true).add();
  }

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

将网站图标放在 Highchart 中间

Put favicon in middle of Highchart

javascript

favicon

highcharts