2013-02-17 2 views
1

내 질문은 특정하던시기에 뮤추얼 펀드 수익률의 히스토그램은 어디 뮤추얼 펀드를 강조 할 것입니다 내가 열 차트를 Highcharts: Show special marker on column charthighcharts 특수 마커

의 하나와 유사하다 관심의 대상은 특별한 표식과 함께 떨어집니다.

예를 들어 x 축에서 -50에서 -25, -25에서 0, 0-10, 10-20, 20-30 및 30-50이 있고 해당 Y 값이 있습니다. 관심있는 뮤추얼 펀드가 해당 양동이에 속하는 것을 보여주기 위해 '20 ~ 30 '에 마커를 강조하고 싶습니다. http://www.highcharts.com/demo/spline-symbols과 같은 스플라인 차트를 사용하여이 작업을 수행 할 수 있음을 알고 있습니다.

기둥 형 차트에서도 동일한 작업을 수행 할 수 있습니까?

답변

2

일반적으로 세로 막 대형 차트에 사용자 지정 표식을 추가 할 수는 없지만 비슷한 동작을 추가 할 수는 있습니다. 나는 산란 시리즈에 대한 사용자 정의 마커와 간단한 예제를 만든 당신은 전설에 더 많은 시리즈를 추가 할 경우에 유용합니다 : http://jsbin.com/oyudan/37/edit를 (아니, 단지 showInLegend: false을 설정 한 경우)

Highcharts.updateMarketMarkers = function (chart) { 
    /* get category width */ 
    var catWidth = chart.xAxis[0].width/chart.xAxis[0].categories.length; 
    /* get padding of each column (two sides) */ 
    var catPadding = chart.series[0].options.pointPadding * catWidth; 
    /* actual value - padding - symbol width/2 */ 
    chart.series[2].markerGroup.translate(chart.series[2].markerGroup.translateX - 2 * catPadding - chart.series[2].data[0].shapeArgs.r/2); 
}; 
chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     type: 'column', 
     showAxes: false, 
     events: { 
      load: function() { 
       Highcharts.updateMarketMarkers(this); 
      }, 
      redraw: function() { 
       Highcharts.updateMarketMarkers(this); 
      } 
     } 
    }, 
    ... 

또 다른 해결책은 사용자 정의 그릴 Highcharts 렌더러를 사용하는 것입니다 특정 장소에서 모양. 여기 렌더러에 대한 자세한 내용을 볼 수 있습니다 : http://api.highcharts.com/highcharts#Renderer

+0

Thanks Pawel. 하이 드 랫즈 http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com에서이 예제와 같은 특정 지점 근처에서 이미지/텍스트 위치를 지정할 수있는 렌더러 라우트를 종료했습니다./tree/master/samples/highcharts/members/렌더러 온 차트 / – user2081195