하이 차트는 단 일선을 기둥 형 차트에 추가합니다.

Question

저는 Highcharts에서 작업 중이며 기본 이중 시리즈 기둥 형 차트가 있습니다. 아래 이미지의 빨간색 상자에 표시된 것처럼 차트에 단일 데이터 기반 줄을 추가하고 싶지만 최상의 접근 방식을 확신하지 못합니다 (현재 달에 예상 월말 값을 기록 할 것입니다) .

• 차트 폭이 가변이기 때문에, 라인
• 라인
• 선폭 열보다 약간 넓게되어야만을 대상 기간의 두 시리즈 중 하나를 중첩한다 "응답"할 필요 자체

나는이 작업을 수행하는 세 가지 방법을 고려하지만, 최적의 경로를 모르겠습니다했습니다

1. 하이 차트 렌더러 : 렌더러를 사용하여 데이터 값에 액세스하고 위치를 매우 쉽게 렌더링 할 수 있다고 생각합니다. 모양을 그리는 일은 그리 중요하지 않습니다. 그러나 나는 "회귀"행동을 할 것이라고 믿지 않는다. 예를 들어 선이 처음에 그려지지만 사용자가 화면을 넓히면 나머지 선의 폭이 증가하는 동안 선이 계속 움직인다. 렌더러의 출력, 나는 resize 이벤트와 연결할 수있는 어떤 요소도 보이지 않으며, 심지어 수학은 그 시점에서 이상적이지 않을 것입니다.)
2. HTML 절대 오버레이 및 창 크기 조정 이벤트로 위치 변경. 단점은 크기가 조정 된 데이터 포인트 값/위치를 가져오고 크기 조정 이벤트 중에 이러한 비율을 유지하는 것입니다.
3. 단일 값을 갖는 세 번째 시리즈. 여기서 내가 예상하는 문제는 대상 열의 맨 위에 위치하도록 시리즈의 서식을 지정하는 것입니다 (이 경우 사용할 수있는 "단일 선"형식 시리즈에 대해서는 알지 못합니다). 필자는 이것이 형식화를 올바르게 구성 할 수있는 것처럼 이상적이라고 생각하는 경향이 있습니다.이를 렌더링하는 것은 하이 차트의 책임이므로 차트의 나머지 부분과 더 관련됩니다. 불행히도 필자는 필요한 디스플레이를 생성하기에 충분한 시리즈 형식과 서식 옵션이 있는지 확신 할 수 없습니다. 또한 시리즈의 "한 줄"렌더링 유형이 아닌, 아래쪽 열이 투명 인 누적 열을 해킹하는 것으로 간주했지만 다른 형식 문제 (예 : 기존 계열 열의 위쪽에 배치)는 여전히 유효합니다.

누구나 이전에 이와 같은 작업을 수행했는지, 수행 방법에 대한 통찰력을 제공 할 수 있습니까? 감사.

Answer 1

사용자 정의 선 그리기는 내가 생각하기에 가장 깨끗한 해결책입니다. 그리기 이벤트에 후킹하여 다시 위치 지정/크기 조정을하면 해당 선을 쉽게 응답 할 수 있습니다.

일련의 접근 방식은 많은 옵션을 설정하지 않고 많은 코딩 작업이 필요하지 않습니다. 사용자 정의 마커 기호가있는 분산 형을 사용할 수 있습니다.

Highcharts.SVGRenderer.prototype.symbols.line = function(x, y, w, h) { 
    return ['M', x, y, 'L', x + w, y]; 
}; 

{ 
    type: 'scatter', 
    showInLegend: false, 
    enableMouseTracking: false, 
    marker: { 
    symbol: 'line', 
    lineColor: 'orange', 
    lineWidth: 6, 
    radius: 20 
    }, 
    data: [ 
    [1.15, 140] 
    ] 
}] 

예 : http://jsfiddle.net/g6fjjach/