Highcharts은 - 어디 여기 Highcharts 원형 차트가

Question

파이 차트에 하나 개의 웨지 스타일과 변화하는 스타일을 배치하는 방법 : http://jsfiddle.net/6PbbR/52/

$(function() { 

    var chart; 
    $(document).ready(function() { 

     // Radialize the colors 
    Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
     return { 
      radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, 
      stops: [ 
       [0, color] 
      ] 
     }; 
    }); 

    // Build the chart 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       plotBackgroundColor: null, 
       plotBorderWidth: null, 
       plotShadow: false, 
       shadow: true, 
        }, 
      tooltip: { 
       enabled: false 
      }, 
      title: { 
       text: "" 
      }, 
      plotOptions: { 
       pie: { 
        allowPointSelect: true, 
        size:'68%', 
        cursor: 'pointer', 
        shadow: true, 
        dataLabels: { 
         enabled: true, 
         distance: -40, 
         style: { 
         width: '100px' 
        }, 
         color: '#fff', 
         connectorColor: '#000000', 
         formatter: function() { 
          return '<b style="font-family:arial;font-size:10px;font-weight:bold">'+ this.point.name +'</b> '; 
         } 
        } 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'Income Investments', 
       data: [ 
        ['FLOATING RATE FUNDS', 16.667], 
        { 
         name: 'Corporate Capital Trust', 
         y: 16.667, 
         sliced: true, 
         selected: true 
        },          
        ['BONDS', 16.667], 
        ['ANNUITIES',  16.667], 
        ['REITs', 16.667], 
        ['CDs',  16.667] 
       ] 
      }], 

     colors: [ 
        '#83a3c6', 
         '#98012e', 
        '#19699b', 
        '#ae9e8e', 
        '#5283b0', 
        '#958370' 
         ], 
     }); 
    }); 

}); 

두 질문 :

1) 나는 행복하지 않다 내가 어떻게 plotOptions {인포 포맷터에 인라인 스타일을 삽입했는지. 무차별 강제 인라인 스타일 대신 API를 사용하여 더 좋은 장소는 어디입니까?

2) red-wedge에 대한 font-family를 변경하고 싶습니다. (아마도 조정/여백을 조정할 수도 있습니다.) 이 일을하는 가장 좋은 방법은 무엇입니까?

편집 : 위의 기능을 수행하지 않고도 이상적으로 내 필요를 달성 할 수 있습니다. API를 사용하여 하나의 데이터 요소에 스타일을 첨부 할 수 있습니까?

Answer 1

단순한 html이기 때문에 class 또는 id을 추가 한 다음 css을 사용하여 스타일을 지정할 수 있습니다.

JS

formatter: function() { 
    return '<b id="myTooltipId">'+ this.point.name +'</b> '; 
} 

CSS

#myTooltipId { 
    font-family: arial; 
    font-size: 10px; 
    font-weight:bold 
} 

업데이트 :

내부 포맷은 this를 사용하여 슬라이스 속성을 얻을 수 있습니다.
슬라이스가 원하는 것인지 확인해야합니다.

formatter: function() { 
    // key is the slice name 
    if (this.key == 'CDs') { 
     return '<b id="myTooltipId">'+ this.point.name +'</b> '; 
    } else { 
     return this.value; 
    } 
}