하이 차트 스타일링, 범례 및 사용자 정의 글꼴

Question

스타일 입력 범례 항목에 사용자 정의 글꼴을 범례 항목으로 적용 할 때 Highcharts에 문제가 있습니다. 실제로 아이템은 서로 너무 가깝고 itemMarginBottom 및 itemMarginTop이 작동하지 않습니다. 여기

내 Highcharts 코드의 일부입니다

legend: { 
    enabled: true, 
    y: 20, 
    align: 'right', 
    verticalAlign: 'top', 
    margin: 30, 
    width: 200, 
    borderWidth: 0, 
    itemMarginTop: 15, 
    itemMarginBottom: 15, 
    itemStyle: { 
      color: '#000', 
      fontFamily: 'MuseoS500' 
    } 
}, 

그리고 여기에 전설의 스크린 샷입니다 :

나는 다음과 같은 것을 해결 : 내 미운 솔루션

, 슬프게 하드 코딩 됨 :

// it is for the text's in the legend, I'll start from 0 and will 
// increase by 10, so it's adding 10 pixels extra space to the next one 
var z = 0;  

// this is for tiny-lines near the texts in legend, they starts from 14 
// and increasing by 14 also ... 
var p = 14; 

// loop through <text> tags, which are texts in the lgened 
$('.highcharts-legend > text').each(function (i) { 

    // they have 'x' and 'y' attribute, I need to work on 'y' obviously 
    y = parseInt($(this).attr('y')); 

    // increasing 'y' value ... 
    $(this).attr('y', y + z); 

    // next element is <path>, the colorful lines ... 
    $(this).next().attr('transform', 'translate(30,' + p + ')'); 

    // increasing the values, for the next item in the loop ... 
    z = z + 10; 
    p = p + 10 + 14; 

}); 

나는 그것이 매우 어리 석다는 것을 알고 있지만, 다른 방법으로는 그것을 해결할 수 없었고, 나는 어떻게 든 그것을 만들어야했습니다. 나는

:) ... 또한 의견을 듣고 행복 할 것 패치 후 새로운 전설 :

Answer 1

Highchart documentation이 lineHeight하지만라는 속성은 그것이 Highcharts 2.1부터 사용되지 않습니다 말한다

공식 Highcharts forum의 포스트도 같은를 확인합니다. 그래서, 당신은 필요에 따라 높이를 변경하거나 차트 렌더링 후 자바 스크립트로 항목 높이를 수정하려고 소스 코드를 해킹 할 수 있습니다.

또한, 범례 항목에 대한 CSS를 설정할 수 있습니다 itemStyle라는 속성이 있습니다.

paddingBottom: '10px'

확인 예 :

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/