나는 하이 차트 그래프가 있으며 각 그래프에 대해 사용자로부터 일부 데이터를 수집하려고합니다. 전설의 각 레이블 옆에 나타나는 일련 이름과 관련된 ID 또는 이름의 텍스트 입력 상자를 갖기 위해 노력하고 있습니다. 그런 다음 수집 된 데이터를 다른 위치의 서버에 제출하는 버튼과 코드를 사용할 수 있습니다.Highcharts 범례 사용자 정의 HTML
labelFormatter 함수 설정을 시도했지만 일반 텍스트 만 지원하는 것으로 보입니다.
하이 차트로이를 수행하는 쉬운 방법이 있습니까? 아니면 내가 원하는 html을 추가하는 하이 차트 이벤트 후크를 사용하여 직접 함수를 작성하는 방법을 찾고 있습니까?
도움을 주시면 감사하겠습니다. 감사합니다.
그래서 결국이 "해결책"이 생겼습니다. 나는 그것이 최선인지 모르겠다. 그러나 누군가 다른 사람이 그것을 필요로 할 때를 대비해서 여기서 메모를 남기고 싶다.
하이 스톡 소스 코드를 확장하고 showCheckbox 코드를 showTextbox 코드로 복사했습니다. 매우 일반적인 솔루션은 아니지만 제 문제를 해결했습니다. 클릭 할 때 포커스를 텍스트 상자로 전달할 수 있도록 onmousedown 핸들러를 수정해야했습니다.
상자는 html로 정확한 위치로 렌더링되어 범례 항목 옆에 나타납니다. 범례 자체는 그래프의 SVG의 일부로 다른 HTML을 얻는 것을 어렵게 만듭니다.
모든 코드를 원한다면 의견을 남겨주세요. 나는 게시 할 것입니다.
이 예제를 살펴보십시오. http://jsfiddle.net/LCFKA/ seriesData를 loadedData 내부에 설정해야하고 getItemsDescription 함수에 표시 할 내용을 설정해야합니다.
커스텀 툴팁 검색을 위해이 포스트에 올랐습니다. SVG 요소를 만드는 데 도움이되었습니다. 고마워. 바이올린 링크 +1. –
모든 유형의 레이블/툴팁에서 작업 HTML을 사용하려면 useHTML을 true로 설정해야합니다 (documentation : /에 없음). 그것은 posistioning에 몇 가지 problembs를 제공하지만 모든 HTML을 렌더링 할 수 있습니다.
예를
plotOptions : {
series: {
dataLabels: {
useHTML: true
}
}
}
당신은 true에 Highcharts 전설의 useHTML 옵션을 설정할 수 있습니다.
legend: {
useHTML: true,
labelFormatter: function() {
return '<span title="' + this.name + '">' + this.name + '</span>';
}
}
안녕 톰 당신은 높은 재고 소스를 확장 한 방법 여부를 말해 줄 수. 전설 렌더링을 변경해야합니다. –