如何在highcharts的x轴标签上使用Bootstrap字体图标答案

【问题标题】：how to use Bootstrap font icons on x-axis lables in highcharts如何在highcharts的x轴标签上使用Bootstrap字体图标
【发布时间】：2023-04-06 10:13:02
【问题描述】：

我正在尝试将引导字体图标放在我的 highchart x 轴标签中，我已经把它放在了一个小提琴中，你可以看到它，

http://jsfiddle.net/sanjaybathre/cJRMx/

我正在使用.net api的highchart代码是：

public static string SocialBarStats()
    {
        Highcharts chart = new Highcharts("chart_SocialBarStats")
            .InitChart(new Chart { DefaultSeriesType = ChartTypes.Bar })
            .SetTitle(new Title { Text = "PAGEVIEWS PER VISIT" })
            .SetXAxis(new XAxis
            {
                Categories = new[] { "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>",
                    "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>", "<i class=\"icon-facebook\"></i>" },
                Title = new XAxisTitle { Text = string.Empty }
            })
            .SetYAxis(new YAxis
            {
                Min = 0,
                Title = new YAxisTitle
                {
                    Text = "",
                    Align = AxisTitleAligns.High
                }
            })
            .SetTooltip(new Tooltip { Formatter = "function() { return ''+ this.series.name +': '+ this.y +' millions'; }" })
            .SetPlotOptions(new PlotOptions
            {
                Bar = new PlotOptionsBar
                {
                    DataLabels = new PlotOptionsBarDataLabels { Enabled = true }
                }
            })
            .SetLegend(new Legend
            {
                Enabled = false
            })
            .SetCredits(new Credits { Enabled = false })
            .SetSeries(new[]
                       {
                           new Series { Name = "Facebook", Data = new Data(new object[] { 2.5 }), Color = System.Drawing.Color.FromName("'#4c66a4'")},
                           new Series { Name = "Pinterest", Data = new Data(new object[] { 1.2 }), Color = System.Drawing.Color.FromName("'#cc181e'") },
                           new Series { Name = "Youtube", Data = new Data(new object[] { 1.8 }), Color = System.Drawing.Color.FromName("'#a825a9'") },
                           new Series { Name = "Twitter", Data = new Data(new object[] { 2.3 }), Color = System.Drawing.Color.FromName("'#129fca'") },
                           new Series { Name = "Google Plus", Data = new Data(new object[] { 2.9 }), Color = System.Drawing.Color.FromName("'#00933B'") }
                       });

        return chart.ToHtmlString();
    }

【问题讨论】：

标签： highcharts dotnethighcharts

【解决方案1】：

您可以使用自定义 HTML formatter 和 useHTML，并根据元素值应用相应的图像。

代码：

xAxis: {
    categories: ['Google Plus', 'Twitter', 'Youtube', 'Pinterest', 'Facebook'],
    title: {
        text: ''
    },
    labels: {
        useHTML: true,
        formatter: function () {
            return {
                'Google Plus': '<i class="icon-google-plus"></i>',
                    'Twitter': '<i class="icon-twitter"></i>',
                    'Facebook': '<i class="icon-facebook"></i>',
                    'Pinterest': '<i class="icon-pinterest"></i>',
                    'Youtube': '<i class="icon-youtube"></i>'
            }[this.value]; 
        }
    }
},

演示：http://jsfiddle.net/IrvinDominin/XB7Nw/

【讨论】：

【解决方案2】：

您需要将useHTML设置为true，并在标签格式化程序中添加图像。

 xAxis: {
        labels: {
            useHTML:true,
            formatter:function() {
                return '<img src="http://www.highcharts.com/demo/gfx/snow.png" />' + this.value;
            }
        }
    },

示例：http://jsfiddle.net/7yJf6/

【讨论】：

如果我有不同的图标可以使用，例如 FB、Youtube、Twitter 等。
您可以准备一组图标或类似的东西，并在 formatetr 中正确使用。我向您发送了如何显示图标的示例，但您需要适应您的期望。
请发送，真的很有帮助。
你如何检查哪个图标应该在特定标签上？按名称还是其他名称？