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

我有一个饼图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 
        } 
       ] 
     }] 
    }); 
});

谢谢对于任何线索......

来源

2013-03-04 l-i-n-k

我不知道在绘制图例符号时，在此级别的自定义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。

来源

2013-03-04 15:01:01 Mark

谢谢你的答案 - 的例子看起来很有希望。不幸的是，每次呈现元素时（例如，在禁用图例项目之后），都需要应用黑客技巧。 – 2013-03-14 21:12:11

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

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

小提琴here

来源

2015-10-12 11:26:59

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

回答

相关问题