符號輪廓與餅圖 - 或 - 自定義圖例符號

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
                    }
                ]
        }]
    });
});

謝謝你的任何線索......

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

Mark的答案不適用於line/bar/column類型。 以下代碼支持：

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

在這里小提琴