5

の円グラフがありwhite slice/segment and grey borderます。残念ながら、境界線は凡例アイコンには適用されません! 凡例のシンボルを個別にスタイルする必要があるかどうか疑問に思っています。API の説明にプロパティが見つかりませんでした。

これを機能させる方法は 2 つあります。どちらが機能しますか？

  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>

4

2 に答える 2

7

凡例シンボルを描画する際のこのレベルのカスタマイズの API にはオプションがありません。チャートがレンダリングされた後、ハッキングするのは非常に簡単です。

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

ここに画像の説明を入力

ここでフィドルを参照してください。

于 2013-03-04T15:01:01.637 に答える
2

マークの答えはline/bar/column型に対して機能しません。以下のコードはそれらをサポートしています:

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

ここでフィドル

于 2015-10-12T11:26:59.557 に答える