Question

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

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

为项目创建自定义SVG图像（非常灵活）
启用图例符号的大纲

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

enter image description here

请参阅小提琴here。

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

小提琴here

符号轮廓与饼图 - 或 - 自定义图例符号

2 个答案: