自定义html标题样式,highcharts自定义标题样式，给标题加上图标进行美化

highcharts自定义标题样式，给标题加上图标进行美化

highcharts的标题如果不做一些个性优化比较难看，颜色和背景可能无法和当前系统匹配，这时就需要对标题进行美化，我们先看一段highcharts默认配置，highcharts的默认配置是不开启html的所以无法增加自己的样式。$(function () {

$('#container').highcharts({

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

title: {

style: {

color: '#FF00FF',

fontWeight: 'bold'

}

},

series: [{

data: [129.9, 271.5, 206.4, 129.2, 124.0, 176.0, 1335.6, 48.5, 16.4, 94.1, 95.6, 54.4]

}]

});

});

效果如下：

接下来我们给Chart Title 这个字符串前面加上一个图标，代码如下。$(function () {

$('#container').highcharts({

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

title: {

style: {

color: '#FF00FF',

fontWeight: 'bold'

},

useHTML:true,

text:'

Chart Title

'

},

series: [{

data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

}]

});

});

效果如下：

网址:http://www.itxst.com/detail/ieq6jujz.html