두 개의 축이있는 하이 차트, 두 번째 축은 y 축 값의 평균으로 그려야합니다.

Question

두 개의 축을 y 값의 평균에 플롯하여 두 개의 x 축을 그려야합니다.

나는 offset 속성을 사용하려했으나 픽셀 단위이다. 제 생각에는 포맷터로 할 수 있다고 생각합니다. 그러나 그것을하는 방법을 모른다.

$(function() { 
var chart; 
$(document).ready(function() { 
    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'line', 
       zoomType: 'x', 
     }, 
     tooltip: { 
      enabled: true, 

     }, 
     title: { 
      text: 'Prediction of Surface Sites' 
     }, 


     xAxis:[ { 
      categories: ["S","A","E","D","V","L","K","E","Y","D","R","R","R","R","M","E","A","L","L","L","S","L","Y","Y","P","N","D","R","K","L","L","D","Y","K","E","W","S","P","P","R","V","Q","V","E","C","P","K","A","P","V","E","W","N","N","P","P","S","E","K","G","L","I","V","G","H","F","S","G","I","K","Y","K","G","E","K","A","Q","A","S","E","V","D","V","N","K","M","C","C","W","V","S","K","F","K","D","A","M","R","R","Y","Q","G","I","Q","T","C","K","I","P","G","K","V","L","S","D","L","D","A","K","I","K","A","Y","N","L","T","V","E","G","V","E","G","F","V","R","Y","S","R","V","T","K","Q","H","V","A","A","F","L","K","E","L","R","H","S","K","Q","Y","E","N","V","N","L","I","H","Y","I","L","T","D","K","R","V","D","I","Q","H","L","E","K","D","L","V","K","D","F","K","A","L","V","E","S","A","H","R","M","R","Q","G","H","M","I","N","V","K","Y","I","L","Y","Q","L","L","K","K","H","G","H","G","P","D","G","P","D","I","L","T","V","K","T","G","S","K","G","V","L","Y","D","D","S","F","R","K","I","Y","T","D","L","G","W","K","F",], 
      minRange:5, 
     }, { 
      lineWidth:1, 
      offset:-80, 
      title:{ 
       text:'Mean Axis' 
      }}], 
     yAxis: { 
      title: { 
       text: 'Surface Sites' 
      }, 

     }, 

     plotOptions: { 
      line: { 
       dataLabels: { 
        enabled: false 
       }, 
       enableMouseTracking: true 
      }, 
      series:{ 
       marker: { 
        enabled:true, 
        radius:2, 

       } 
      }, 


     }, 
     series: [{ 
      name: 'HPLC', 
      data: [15.1,15.6,4.3,19.2,20.5,16.5,18.7,12.9,20.8,34.2,32.7,20.7,30.4,22.5,9.1,-4.3,-17.7,-15.4,-20.4,-30.1,-34.1,-22.8,-6.6,12.6,10.3,25.2,17.9,10.6,18.5,9.6,5.3,8.9,-6.8,8.9,20.2,12.3,18.4,9,7.2,13.5,14.8,14.1,14.1,15.6,21.4,17.5,17.5,17.5,6.1,11,12.3,12.3,12.3,22.5,22.5,38.2,36.9,20.7,10.6,4.8,4,-1.7,-16.6,-15.8,-0.9,-0.9,8.5,0.9,4.5,19.4,20.7,20.7,30.8,31.1,35.1,35.9,38,26.5,30.8,25,26,29.6,18.9,12.5,17.6,-2.4,-2.4,-2.9,-2.9,-7.9,-3.6,5,17.1,16.6,14.3,12.8,20.1,20.4,16.1,6,16.2,17.2,14.4,22,8,4.4,18.1,17.8,8.9,-1.7,-0.9,17.1,5.8,10.1,6.5,15.9,17.1,16.3,8.4,15.7,12.7,1.4,0.9,5.2,7.3,10.9,9.1,9.9,24.8,10.4,10.4,6.8,-0.8,9.4,5.8,-3.6,10.8,20.2,22,26,15.8,13.7,19.5,5.1,-9.8,-10.1,-4.4,-9.9,-7.8,-7.8,7.9,22.8,23.1,13.4,30.4,33.2,27.4,27.9,13,-1,3,-6.7,-21.7,-27.2,-29,-9.8,3.9,6,4.2,22.2,23.4,24.2,16.3,1.4,5,14.4,14.4,13.2,3.5,7.1,26.3,9.3,9.3,1.4,1.4,1.4,3.5,0,11.3,7.7,9.8,14.8,22.7,20.9,20.1,20.1,13.8,1.6,12.8,4.9,4.6,-3,-13.1,-18.1,-12,-13,-18.5,-33.4,-25.8,-12.1,-0.8,6.8,2.9,17.8,29.1,33.4,33.4,33.4,37.7,27.6,12.7,15.8,2.1,2.1,5.2,0.9,15.4,30.3,30.8,30.8,15.9,8.8,13.1,16.6,17.4,2.5,10.4,25.3,19.2,7.3,2.5,6,6,7.5,-8.2,5.5,-1.8,-1.8,-9.7,-9.7,] 
     }] 
    }); 
}); 

});

어떤 제안 ....

jsfiddle은 link

Answer 1

대신 줄거리를 사용할 수 있습니다. 줄거리에서 당신은 표시되어야 값을 설정하고, 참조 :

• http://api.highcharts.com/highcharts#yAxis.plotLines