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

我有一個餅圖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

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

回答

相關問題