하이 차트 이중 축 탐색기

Question

듀얼 콤보 축과 비슷한 그래픽을 사용하기 시작했습니다. 하이 스톡에서 탐색기를 추가했지만 탐색기 그래픽은 그래픽과 많이 다릅니다. 네비게이터가 두 열을 같은 열에 플로팅하는 것으로 보입니다. 두 축을 모두 구성 할 수는 없습니다.

나는 jsfiddle 예를 수정하기 위해 노력하고있어하지만 난 그것이 작동 만들 수 없습니다 :

series: [{ 
     name: 'Rainfall', 
     type: 'column', 
     yAxis: 1, 
     data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
     tooltip: { 
      valueSuffix: ' mm' 
     }, 
     showInNavigator: true 

    }, { 
     name: 'Temperature', 
     type: 'spline', 
     data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], 
     tooltip: { 
      valueSuffix: '°C' 
     }, 
     showInNavigator: true 
    }] 

http://jsfiddle.net/guconnmn/2/

다음과 같은 코드를 사용하여 네비게이터에 두 그래프를 추가 할 수 있습니다

Answer 1

는 ewolden 지적하는 문제에 대한 해결입니다 :

내가 한 각 시리즈를 그 위에 올려 놓는 방법을 찾지 못한다. 자신의 축을 탐색기에 표시합니다.

두 y 축 최대 비율을 계산하고 두 번째 시리즈의 모든 점을 새 값으로 업데이트 할 수 있습니다. 그것은 두 번째 y 축의 존재를 모방해야합니다.

chart: { 
    zoomType: 'x', 
    events: { 
     load: function() { 
     var chart = this, 
      navigator = chart.navigator, 
      ratio = chart.yAxis[0].getExtremes().max/chart.yAxis[1].getExtremes().max; 


     navigator.series[1].points.forEach(function(p) { 
      p.update({ 
      y: p.y/ratio 
      }); 
     }, false); 

     this.redraw(); 
     } 
    } 
    } 

라이브 데모 :http://jsfiddle.net/kkulig/p44kx9xn/

Answer 2

:

을

navigatorOptions: { 
    type: 'column' //in the column series 
} 

그리고

navigatorOptions: { 
    type: 'line' //in the line series 
} 

즉, 각 시리즈를 탐색기에서 자체 축에 배치하는 방법을 찾지 못했습니다. 또한 highstock은 xAxiscategories, see API을 지원하지 않으며 highstock.xAxis은 datetime 형식 만 지원합니다. 따라서 타임 스탬프를 채우고 원하는 출력이 나오면 몇 달 동안 표시해야합니다.

근무 예 : series.navigatorOptions에http://jsfiddle.net/ewolden/p5amaofc/

API : 여기https://api.highcharts.com/highstock/series.line.navigatorOptions