하이 차트 영역 차트의 바깥 쪽 테두리 적용

Question

모의 작업과 같이 영역 차트를 구현하고 있지만 일부는 엄격하지만 차트를 그대로 구성하려면 http://api.highcharts.com/highcharts에서 사용할 수있는 옵션을 가져올 수 없습니다. .

다음은 모형입니다. 내가 지금까지 달성 한 무엇

은 다음과 같습니다

Fiddle Demo

그래서 내가 할 수하지

1. 배경 색상

backgroundColor: { 
       linearGradient: false, 
       stops: [ 
        [0, 'rgb(255, 255, 255)'], 
        [1, 'rgb(200, 200, 255)'] 
       ] 
      }, 

을 달성하기 위해 수

2. 바깥 쪽 경계선 만. (실물 모형에 표시된대로)

3. 호버에 3 개의 레이블 모두 표시. (실물 크기로 표시)

4. 전설에 따르면 "CPM IMPS SPEND BY TIME"과 같은 색으로 나는 모의 작업에서와 같은 성과를 내고 싶다.

마지막 포인트 구현 :

Answer 1

음 ..

1. 배경 색상 :

chart: { 
    backgroundColor: 'black', //for whole plot 


name: 'IMPS', 
data: [ 
... 
], color: 'rgb(213, 156, 72)' //for one area 

2. 바깥 쪽 경계선 만. (실물 모형에 표시된대로)

yAxis: [{ 

     lineWidth: 1, 
     title: { 
      text: '' 
     }, 
     labels: { 
      formatter: function() { 
       return this.value/1000 + 'k'; 
      } 
     }, 
     gridLineWidth: 0, 
     minorGridLineWidth: 0 
    }, { 

     lineWidth: 1, 
     title: { 
      text: '' 
     }, 
     labels: { 
      formatter: function() { 
       return this.value/1000 + 'k'; 
      } 
     }, 
     gridLineWidth: 0, 
     minorGridLineWidth: 0, 
     linkedTo: 0, 
     opposite: true 
    }], 

3. 호버에 3 개의 레이블 모두 표시. (실물 모형에 표시된대로)

tooltip: { 
    pointFormat: '{series.name} <b>${point.y:,.0f}</b> <br/>', //like in mock up 
    shared: true, //all series 
    crosshairs: true //vertical line 
}, 

4. 전설에 따르면 "CPM IMPS SPEND BY TIME"과 같은 색으로 나는 모의 작업에서와 같은 성과를 내고 싶다.

JS :

그래서 이미 구현 this question

마지막 포인트에서 그것을 어떻게 대답

tooltip: { 
     backgroundColor: null, 
     borderWidth: 0, 
     shadow: false, 
     useHTML: true, 
     style: { 
      padding: 0 
     }, 

을 당신이 원하는 것처럼 지금 당신은 당신의 도구 설명을 사용자 정의 할 수 있습니다

.highcharts-tooltip>span p { 
    margin: 0; 
} 
.highcharts-tooltip>span span{ 
    display: none; 
} 
#pCPM{background: rgb(87, 188, 0);} 
#pIMPS{background: rgb(213, 156, 72);} 
#pSPEND{background: rgb(12, 170, 226);} 

하이 차트의 API는 ax에 현재 값을 설정할 수 없습니다 하지만, 당신은 기본 라벨을 사용하지 못하게 할 수 있으며 전설로 이미하고있는 것처럼 절대 위치로 수제 라벨을 붙일 수 있습니다.

요약 FIDDLE