highcharts - 带有饼图的符号轮廓或自定义图例符号

Question

我有一个带有white slice/segment and grey border. 不幸的是，边框不适用于图例图标！我想知道是否有必要单独设置图例符号的样式。我在 API 描述中没有找到任何属性。

有两个想法，如何使这项工作。哪一个会起作用？

1. 为项目创建自定义 SVG 图像（非常灵活）
2. 启用图例符号的轮廓

这是示例：http: //jsfiddle.net/c2XVz/

var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        colors: [
        'blue'      , 
        'red'   , 
        'silver'        ,
        'orange'    , 
        'green'     ,
        'grey'  , 
        'gold'      ,
        'rgba(80, 183, 123, 1)' ,
        'rgba(128, 0, 102, 1)'  ,
        'rgba(150, 124, 100, 1)'    ,
        'rgba(193, 10, 0, 1)'       ,
        'rgba(91, 214, 235, 1)' ,
        'rgba(90, 111, 137, 1)'     ,
        'rgba(212, 173, 156, 1)'    ,
        'rgba(145, 145, 145, 1)'    ,
        'rgba(146, 184, 214, 1)'
        ],
        chart: {
            renderTo: 'container',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: 'Lorem ipsum 2013'
        },
        legend: {
            align: 'right',
            verticalAlign: 'top',
            x: -60,
            y: 72,
            layout: 'vertical'
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true,
                slicedOffset: 20
            }
        },
        series: [{
            type: 'pie',
            name: 'Expenses',
            data: [
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    ['Legend item', 20.0],
                    {
                        name: 'Not categorized',
                        y: 10.0,
                        color: '#ffffff',
                        borderColor: '#646464',
                        borderWidth: 0.5,
                        sliced: true,
                        selected: true
                    }
                ]
        }]
    });
});

谢谢你的任何线索......</p>

Answer 1

我在 API 中没有看到任何用于绘制图例符号的自定义级别的选项。图表呈现后很容易破解：

$(chart.series[0].data).each(function(i,slice){
   $(slice.legendSymbol.element).attr('stroke-width','1');
   $(slice.legendSymbol.element).attr('stroke','gray');
});

在这里看小提琴。

Answer 2

马克的答案不适用于line/bar/column类型。下面的代码支持这些：

$(chart.series).each(function(i,slice){
   $(slice.legendSymbol.element).attr('stroke-width','1');
   $(slice.legendSymbol.element).attr('stroke','black');
});

在这里提琴