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属性。

 

你可能感兴趣的:(Highcharts)