하이 차트 열 차트의 각 열에 행을 추가하려고합니다

Question

열 차트의 각 열에 한 행을 추가하는 방법이 있습니까? 예를 들어 필자는 시험 점수를 기둥으로 표시했습니다. 각 테스트에는 해당 컬럼에 선으로 표시하려는 최소 통과 등급이 있으며 통과 등급을 나타내는 툴팁을 추가 할 수 있습니다. 각 시험의 합격 점수가 항상 같지는 않습니다. 시험 성적이 합격 점수를 충족시키지 못하면 라인 아래에있게됩니다. 합격 점수를 초과하면 줄이 줄에 나타납니다.

Answer 1

조합 차트를 사용할 수 있습니다. 실제 성적에 대해 기둥을 사용하고, 통과 성적의 상단에 선 차트를 그립니다. 당신이 '분산'대신 사용할 수

http://jsfiddle.net/hfwLd118/

당신이 선을 좋아하지 않는 경우에

$('#container').highcharts({ 
    title: { 
     text: 'Exam Scores' 
    }, 
    xAxis: { 
     categories: ['Test 1', 'Test 2', 'Test 3', 'Test 4', 'Test 5'] 
    }, 

    series: [{ 
     type: 'column', 
     name: 'Marks', 
     data: [83, 72, 71, 63, 74] 
    }, { 
     type: 'line', 
     name: 'Pass Mark', 
     data: [75, 79, 63, 70, 80], 
     marker: { 
      lineWidth: 2, 
      lineColor: Highcharts.getOptions().colors[3], 
      fillColor: 'white' 
     } 

    }] 
}); 

. 당신이 삼각형을 좋아하지 않는 경우

{ 
     type: 'scatter', 
     name: 'Pass Mark', 
     data: [75, 79, 63, 70, 80], 
     marker: { 
      symbol:'triangle' 
     } 

http://jsfiddle.net/sozhojst/

주, 당신은 기호에 대한 자신의 이미지를 제공 할 수 있습니다.

Answer 2

하이 챠트 마커 기호를 세로 및 가로선으로 확장하여 글 머리 기호 차트를 작성하는 데 사용한 기술을 사용할 수 있습니다.

Highcharts.Renderer.prototype.symbols.vline = function(x, y, width, height) { 
    return ['M',x ,y + width/2,'L',x+height,y + width/2]; 
}; 
Highcharts.Renderer.prototype.symbols.hline = function(x, y, width, height) { 
    return ['M',x ,y + height/2,'L',x+width,y + width/2]; 
}; 

사용 예제 :

• http://jsfiddle.net/jlbriggs/UGs2E/17/