2017-08-17 19 views
0

どのように右のY軸に使用済み領域のみを表示できますか?Highchartsで使用されたティックのみを表示する

Highcharts.chart('container', { 
 
\t \t chart: { 
 
      defaultSeriesType: 'line', 
 
    }, 
 
    xAxis: { 
 
      gridLineWidth: 1, 
 
      minorGridLineWidth: 1, 
 
      type: 'datetime', 
 
      tickInterval: 3600 * 24 * 30 * 1000, 
 
      labels: { 
 
       rotation: -45, 
 
       formatter: function() { 
 
       \t \t var monthNames = ["January", "February", "March", "April", "May", "June", 
 
         "July", "August", "September", "October", "November", "December" 
 
        ]; 
 
        
 
        var monthStr = monthNames[new Date(this.value).getMonth()]; 
 
        return monthStr; 
 
       } 
 
      } 
 
     }, 
 
    yAxis: [{ 
 
      title: { 
 
       text: null 
 
      }, 
 
      gridLineWidth: 1, 
 
      minorGridLineWidth: 1, 
 
         labels: { 
 
       formatter: function() { 
 
        return this.value * 100 + " %"; 
 
       } 
 
      }, 
 
      tickInterval: 0.2, 
 
      opposite: true, 
 
      min: 0 
 
    },{ 
 
       title: { 
 
       text: null 
 
      }, 
 
      gridLineWidth: 1, 
 
      minorGridLineWidth: 1, 
 
      min: 0 
 
    } 
 
    ], 
 

 
    series: [{ 
 
      name: "left", 
 
      data: [[1485896400000,8086.829999999999],[1488315600000,9575.62],[1490994000000,8446.84],[1493586000000,9959.93],[1496264400000,9246.06],[1498856400000,2346]], 
 
      yAxis: 1, 
 
      marker: { 
 
       symbol: 'circle' 
 
      } 
 
     },{ 
 
      name: "right", 
 
      data: [[1485896400000,0.7920220246886492] 
 
      ,[1488315600000,0.7950181534688361] 
 
      ,[1490994000000,0.8068168576051594] 
 
      ,[1493586000000,0.850108440799688] 
 
      ,[1496264400000,0.8010823118430489] 
 
      ,[1498856400000,0.8243148278285313]], 
 
      yAxis: 0, 
 
      colorIndex: 3, 
 
      marker: { 
 
       symbol: 'circle' 
 
      } 
 
     }] 
 

 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container"></div>

値が小さいので、私は(79% - 85%)、右Y軸をスケーリングする必要があります。

答えて

1

右Y軸には現在tickInterval: 0.2min: 0が設定されています。これらの2つの設定を削除すると、Y軸がデータに合わせて縮尺されます。更新されたフィドルを参照してください: https://jsfiddle.net/935dkrqm/2/ あなたのツールチップのフォーマッタを入れて、パーセンテージ系列の値を正しく見ることができます。

tooltip: { 
      pointFormatter: function(){ 
       return '<b>' + Highcharts.numberFormat(this.y * 100, 2) + '%</b>' 
       } 
     } 
+0

ありがとうございます!それはとても簡単でした:) –

+0

P.S.私はツールチップのためのフォーマッタを持っています。私はちょうどそれをjsfiddleにコピーしませんでしたが、それでも助けてくれてありがとう!) –

関連する問題