[Highcharts] Plot bands and plot lines

Plot bands and plot lines

plot lines와 plot bands는 사용법이 꽤 비슷하다. 둘 다 color, events, id, label, 그리고 zIndex를 옵션으로 가진다. 선과 밴드는 정의된 축 안에서 항상 수직을 이룬다. polar 차트나 gauge에서 이를 사용하면 매우 흥미로운 예시를 만들 수 있는데 이는 이후에 설명하도록 하겠다. plot band/line이 x축과 y축 모두에서 사용되면, 아래 그림과 같이 y축 plot band/line이 먼저 나타나게 된다. 

plot band는 x축 y축 모두 만들 수 있으며 둘 다 한 번에 생성 가능하다:

xAxis: {
  ...,
  plotBands: [{
    color: 'orange', // Color value
    from: 3, // Start of the plot band
    to: 4 // End of the plot band
  }],
  plotLines: [{
    color: 'red', // Color value
    dashStyle: 'longdashdot', // Style of the plot line. Default to solid
    value: 3, // Value of where the line will appear
    width: 2 // Width of the line    
  }]
},
yAxis: {
  ...,
  plotBands: [{
    ... // Same as in the xAxis
  }],
  plotLines: [{
    ... // Same as in the xAxis
  }]
}

Labels

plot band는 레이블을 가질수 있는 옵션이 있다. 레이블은 밴드 혹은 라인의 상단에 텍스트로 표시된다. 

레이블을 생성하기 위해선 label 객체를 생성해 밴드 혹은 라인에 넣으면 된다. 

plotBands: {
  ...,
  label: { 
    text: 'I am a label', // Content of the label. 
    align: 'left', // Positioning of the label. 
    Default to center. x: +10 // Amount of pixels the label will be repositioned according to the alignment. 
  }
}

 

Events

이벤트는 plot band나 plot line 객체에 생성할 수 있는 객체이다. 이 객체는 밴드나 라인에 마우스 이벤트를 정의할 수 있다. 값들은 click, mouseover, mouseout  그리고 mousemove가 있다. 

plotBands: {
  ...,
  events: {
    click: function () {
      // Action performed when event occurs
    },
    mouseover: function () {
      // Action performed when event occurs
    },
    mouseout: function () {
      // Action performed when event occurs
    },
    mousemove: function () {
      // Action performed when event occurs
    }
  }
}

Dynamically update

렌더링이 끝나면 차트는 새로운 plot band나 line으로 업데이트 혹은 제거될 수 있다. addPlotBand(), addPlotLine(), remvoePlotBand() 혹은 removePlotLine() 함수를 이용하면 된다. 

plot band 혹은 line을 제거할 때 제거되는 객체가 id를 가지고 있어야 한다. 그렇지 않으면 객체를 인식할 수 없으며 함수는 실행되지 못한다. 

 

Plot bands and lines in polar charts and gauges

polar chart 혹은 gauge에서 plot band는 차트를 따라 원형을 이룬다. x축에서 사용되면 밴드는 차트의 외부를 둘러싸게 된다. y축으로는 원형을 만들고 해당 영역을 채우게 된다. gauge에서 밴드는 차트의 외부를 둘러싼다. plot line의 경우 x축에서는 직선을, 그리고 y축에서는 원형으로 표시된다.