javascript - Highcharts 仪表 : Adding Icons

Question

我正在尝试在数据标签中添加图标，我成功地添加了一些像这样的 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 函数中返回足够的图标。您需要记住属性 useHTML 必须设置为 true。

API 引用:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.formatter

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