하이 차트 : 모든 xAxis gridLine에 클릭 가능한 이미지 추가

Question

사용자가 꺾은 선형 차트의 데이터 요소를 클릭하여 해당 날짜에 메모를 추가 할 수있는 사용자 지정 기능을 구축하고 있습니다. 음표가 실제로 메트릭 자체에 첨부되지 않고 오히려 착신 날짜이므로 오해의 소지가 있습니다. 다시 말해, 제가 01/01/12 - 01/08/12에 걸쳐 하나의 라인 차트에 6 개의 시리즈를 가지고 있다면, 01/05/12에 단일 노트가 6 시리즈 모두에 적용됩니다. 따라서 6 시리즈 중 하나 또는 2012 년 1 월 5 일에 데이터 포인트를 클릭하는 것이 상상할 수 있듯이 사용자가이 메모가 전체 날짜 및 전체 시리즈가 아닌 해당 데이터 포인트에 적용된다고 생각하도록 오도 할 것입니다. 그 날짜에 토지.

그래서,이 유용성 문제를 해결하기 위해 나는 최고의 시각적 이런 식으로 뭔가 될 것이라고 결정했습니다 :

각각 x 축 눈금 선 상단에 클릭 할 수있는 아이콘이있을 것이라고 것 xAxis gridLine을 사용하여 배율을 조정해야합니다 (사용자가 확대 영역을 선택하는 경우).

이 문제를 해결하는 가장 좋은 방법에 대한 제안 사항은 무엇입니까? 모든 라인에 아이콘을 추가하는 가장 좋은 방법에 대한 제안 만 필요합니다 ... 이미 모든 포스트 클릭 기능이 있습니다.

Answer 1

마크 제안에 따라 redraw 이벤트를 사용하여 이미지를 배치하고 load 이벤트를 사용하여 이미지를 만듭니다. 내보내기 중에이 파일을 사용할 수있게하려면 load에 파일을 추가해야하며 각 redraw에 새 이미지를 만들지는 않습니다.

이 차트 이벤트

이 사용됩니다 다음 drawImages 기능에

events: { 
    load: drawImages, 
    redraw: alignImages 
} 

나는 역 번역을 사용하고있어 x 축 차트에 이미지를 배치하는 :에 추가 한 후

x = chart.plotLeft + chart.xAxis[0].translate(i, false) - imageWidth/2, 
y = chart.plotTop - imageWidth/2; 

및 클릭 핸들러, zIndex, 포인터 커서 설정 :

chart.renderer.image('http://highcharts.com/demo/gfx/sun.png', x, y, imageWidth, imageWidth) 
    .on('click', function() { 
     location.href = 'http://example.com' 
    }) 
    .attr({ 
     zIndex: 100 
    }) 
    .css({ 
     cursor: 'pointer' 
    }) 
    .add(); 

alignImagesattr 함수는 drawImages과 같은 방식으로 계산 된 이미지의 새로운 x 및 y 값을 설정하는 데 사용됩니다. jsfiddle

스크린 샷에

전체 예 :

Answer 2

몇 가지 아이디어. 먼저 차트 redraw 이벤트를 사용하여 차트가 다시 그려지는 시점을 알 수 있습니다 (예 : 확대/축소). 그런 다음 두 번째로 명시 적으로 관심있는 축 위치에 이미지를 배치하십시오. 해당 쿼리를 DOM에서 직접 가져 오려면. jQuery를 사용

:

$('.highcharts-axis') //return an array of the two axis. 

그들은 SVG를 (x, y)의 위치와 "텍스트 요소"어린이 것이다.