可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I have a problem of rendering legends for 3d scatter charts with different symbol sizes - see http://jsfiddle.net/YyV6x/4/

The legend takes the same sizes of symbols as in the main chart and the positioning of legend items is completely off. I tried forcing the legend symbols to be the same size:

$(chart.series).each(function(){
    this.legendSymbol.attr('width',8);
    this.legendSymbol.attr('height',8);
});

Unfortunately, it also shifts symbol X and Y coordinates - see http://jsfiddle.net/HB53K/.

How can I fix this?

Thanks

回答1:

You could do a translate on each chart.series to move them into the correct position before adjusting the width and height. Like this (JSFiddle example):

$(chart.series).each(function(){
    this.legendSymbol.translate((this.legendSymbol.width/2), ((this.legendSymbol.height/2)-4));
    this.legendSymbol.attr('width',8);
    this.legendSymbol.attr('height',8);
});

It does not fix the spacing that is left over between legend items from the original sizes, but at least each item is in position for their legend text.

There may be some more elegant ways to solve this.

回答2:

You can use different solution: set default marker for series, but for each point change radius: http://jsfiddle.net/HB53K/5/

Series example:

    { 
        name: 'Drinking out',
        data: [
            {
                y: 5,
                marker: {
                    radius: 19
                }
            },{
                y: 8,
                marker: {
                    radius: 19
                }
            },{
                y: 6,
                marker: {
                    radius: 19
                }
            }
        ],
        marker: {
            symbol: 'square',
            //radius: 19 //default value
        }
    }