Hightcharts 自定义legend的symbol的样式

要自定义Highcharts的legend中，每个系列名字前的图标(symbol)的样式，除了在初始化图时使用官方提供的有限的参数，还可以重写Highcharts.seriesTypes[type].prototype.drawLegendSymbol这个函数。type是图的类型，函数会传入两个参数，分别是legend和item。

官方默认的的Area图的drawLegendSymbol函数如下：

 

/**
* Get the series' symbol in the legend
* 
* @param {Object} legend The legend object
* @param {Object} item The series (this) or point
*/
drawLegendSymbol: function (legend, item) {
		
    item.legendSymbol = this.chart.renderer.rect(
        0, //方块的左上角点的x坐标
        legend.baseline - 11， //方块的左上角点的y坐标
        legend.options.symbolWidth,   // 这个就是chart初始化参数中legend里设置的symbolWidth属性，是方块的宽
        12, // 是方块的高
        2 // 圆角的半径
    ).attr({
        zIndex: 3
    }).add(item.legendGroup);		
		
}

假如修改了方块左上角点的x位置，那么为了不让方块覆盖到文字上，则初始化chart时，legend对象的symbolPadding属性也要做对应的设置。例如：

左上角点是0 + 20，则symbolPadding要设置也成20。

 

官方代码中的另外一个函数：

 

/**
 * Get the series' symbol in the legend. This method should be overridable to create custom
 * symbols through Highcharts.seriesTypes[type].prototype.drawLegendSymbol.注意：官方注释写错了，写成了drawLegendSymbols，多了一个s
 * 
 * @param {Object} legend The legend object
 */
drawLegendSymbol: function (legend) {
	
	var options = this.options,
		markerOptions = options.marker,
		radius,
		legendOptions = legend.options,
		legendSymbol,
		symbolWidth = legendOptions.symbolWidth,
		renderer = this.chart.renderer,
		legendItemGroup = this.legendGroup,
		baseline = legend.baseline,
		attr;
		
	// Draw the line
	if (options.lineWidth) {
		attr = {
			'stroke-width': options.lineWidth
		};
		if (options.dashStyle) {
			attr.dashstyle = options.dashStyle;
		}
		this.legendLine = renderer.path([
			M,
			0,
			baseline - 4,
			L,
			symbolWidth,
			baseline - 4
		])
		.attr(attr)
		.add(legendItemGroup);
	}
	
	// Draw the marker
	if (markerOptions && markerOptions.enabled) {
		radius = markerOptions.radius;
		this.legendSymbol = legendSymbol = renderer.symbol(
			this.symbol,
			(symbolWidth / 2) - radius,
			baseline - 4 - radius,
			2 * radius,
			2 * radius
		)
		.add(legendItemGroup);
	}
}

 drawLegendSymbol函数中定义的radius属性，会在Legend.propotype中的colorizeItem函数中被覆盖掉：

/**
 * Set the colors for the legend item
 * @param {Object} item A Series or Point instance
 * @param {Object} visible Dimmed or colored
 */
colorizeItem: function (item, visible) {
	var legend = this,
		options = legend.options,
		legendItem = item.legendItem,
		legendLine = item.legendLine,
		legendSymbol = item.legendSymbol,
		hiddenColor = legend.itemHiddenStyle.color,
		textColor = visible ? options.itemStyle.color : hiddenColor,
		symbolColor = visible ? item.color : hiddenColor,
		markerOptions = item.options && item.options.marker,
		symbolAttr = {
			stroke: symbolColor,
			fill: symbolColor
		},
		key,
		val;

	
	if (legendItem) {
		legendItem.css({ fill: textColor });
	}
	if (legendLine) {
		legendLine.attr({ stroke: symbolColor });
	}
	
	if (legendSymbol) {
		
		// Apply marker options
		if (markerOptions) {
			markerOptions = item.convertAttribs(markerOptions);
			for (key in markerOptions) {
				val = markerOptions[key];
				if (val !== UNDEFINED) {
					symbolAttr[key] = val;
				}
			}
		}

		legendSymbol.attr(symbolAttr); // 这句执行完之后，会给legendSymbol这个对象添加 r=4 这个值，就会影响symbol的圆角。
	}

 上面函数中的markerOptions = item.options && item.options.marker这句，给markerOptions赋值，它的值是：

markerOptions : {
	enabled: false，
	lineColor: "#FFFFFF"，
	lineWidth: 0，
	radius: 4，// 这个用这个值，给legendSymbol对象增加了r=4的属性，导致最终生成的SVGElement对象的rx，ry都设置成4，出现了圆角。
	states: Object
}

 这些值来自chart初始化参数plotOptions的series的marker属性。