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:'<div style="background: url(https://www.itxst.com/img/logo.png) no-repeat;background-size: 26px;padding-left:26px;">Chart Title</div>'
		},
		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]
		}]
	});
});

  效果如下：

Quote:https://www.itxst.com/detail/ieq6jujz.html