2

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

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

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

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();
    }
4

2 回答 2

2

您可以使用自定义 HTMLformatter并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/

于 2014-05-26T15:55:28.083 回答
1

您需要设置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/

于 2014-05-26T12:25:18.907 回答