Highcharts量規：添加圖標

Question

我正在嘗試在dataLabels中添加圖標，我成功添加了一些HTML，例如： return '<span style="color:#89891C">Partially rejected: ' + partial + '</span><br/>' +'<span style="color:#933">Rejected: ' + rejected + '</span>'; ，但現在我想添加圖標，而是使用** Ionicons *。 這是代碼：

var chart=Highcharts.chart(id, {
                chart: {
                    type: 'gauge',
                    alignTicks: false,
                    plotBackgroundColor: null,
                    plotBackgroundImage: null,
                    plotBorderWidth: 0,
                    plotShadow: false,
                    backgroundColor:'rgba(255, 255, 255, 0.0)'
                },
                exporting: { enabled: false },
                title: {
                    text: ''
                },
                pane: {
                    startAngle: -150,
                    endAngle: 150,
                    background: {
                        from: 0,
                        to: partial+rejected,
                backgroundColor: '#f55',
                innerRadius: '85%',
                outerRadius: '50%',
                shape: 'arc',

            },
                },
                yAxis: [{
                    lineWidth: 0,
                    min: 0,
                    max: parseInt(val),
                    tickInterval: 1,
                    tickPosition: 'outside',
                    minorTickColor: '#FF0000',
                    tickColor: '#FF0000',
                    tickWidth: 2,
                    tickLength: 10,
                    minorTickPosition: 'outside',
                    tickLength: 15,
                    minorTickLength: 5,
                    title:{text:'Total: '+val,style:{ color:"#333" }},
                    labels: {
                        distance: 25,
                    },
                    offset: 5,
                    endOnTick: false,
                    plotOptions: {
                        solidgauge: {
                            dataLabels: {
                                y: 5,
                                borderWidth: 0,
                                useHTML: true
                            }
                        }
                    },
                    plotBands: [{
                        from: 0,
                        to: delivered,
                        color: '#21A121',
                        thickness: '15%',
                        id: 'plot-band-1'
                    }]
                }],                    

                series: [{
                    name: 'Managed',
                    data: [{
                        id: 'deliver',
                        y: parseInt(total),
                        dial: {
                            backgroundColor:'#D9972E',
                            radius: '100%',
                            baseWidth: 10,
                            baseLength: '5%',
                            baseWidth: 15,
                            rearLength: '0%',
                        }
                    }],
                    dataLabels: {
                        formatter: function () {
                            var total = this.y;
                            return '<i class="ion-information-circled" title="RP: '+partial+'" style="color:#EEF007"></i><i class="ion-information-circled" title="RT: '+rejected+'" style="color:#F00707"></i>';
                        },
                        backgroundColor: {
                            linearGradient: {
                                x1: 10,
                                y1: 10,
                                x2: 10,
                                y2: 11
                            },
                            stops: [
                                [0, '#DDD'],
                                [1, '#FFF']
                            ]
                        }
                    },
                    tooltip: {
                        valueSuffix: ' '
                    }
                }]
            });

我想要弄清楚的部分是在dataLabels上 ，如果有任何信息可能需要了解我想要實現的目標，請問我，謝謝

Answer 1

只需獲取Ionicons CSS文件（ https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css ），然后在dataLabels.formatter函數中返回適當的圖標dataLabels.formatter 。 您需要記住，必須將useHTML屬性設置為true。

API參考：
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter

例：
http://jsfiddle.net/h0xLzv8h/