ハイチャート - 左Y軸を使用する3つのシリーズと右Y軸を使用する第4シリーズ

Question

左のY軸を使用して3つのボリュームシリーズ（油、ガス、水）を表示するグラフがあります。私は、このグラフ上のウェルの数について別の系列を、右軸に沿って異なるスケールを用いて表示する必要がある。コードは以下に示されている：

$(document).ready(function() { 
    $("#tabs").tabs(); 
    new Highcharts.Chart({ 
     chart: { 
     renderTo: 'volume_chart', 
     type: 'line' 
     }, 
     title: { 
     text: "#{title_text}" 
     }, 
     xAxis: { 
     title: { text: 'Time Period' }, 
     tickInterval: #{tick_interval}, 
     categories: #{x_array}, 
     showLastLabel: true, 
     labels: { 
      rotation: -45, 
      align: 'right', 
      style: { 
       font: 'normal 13px Verdana, sans-serif' 
      } 
     }   
     }, 
     yAxis: { 
     title: { text: 'Volume' }, 
     type: 'logarithmic' 
     }, 
     tooltip: { 
     headerFormat: '<b>{series.name}</b><br />', 
     pointFormat: 'Period = {point.x}, Volume = {point.y}' 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -20, 
      y: 100, 
      borderWidth: 0 
     }, 
     plotOptions: { 
      series: { 
       marker: { 
        enabled: false, 
        states: { 
         hover: { 
          enabled: true 
         } 
        } 
       } 
      } 
     }, 
     series: [{ 
     name: 'Oil, bbl', 
     color: 'green', 
     data: #{oil_vol_array}, 
     pointStart: 1 
     },{ 
     name: "Gas, Mcf", 
     color: 'red', 
     data: #{gas_vol_array}, 
     pointStart: 1 
     },{ 
     name: 'Water, bbl', 
     color: 'blue', 
     data: #{water_vol_array}, 
     pointStart: 1 
     }] 
    }); 
    }); 

油、ガス、および水のそれぞれについて3つのシリーズを参照してください。私は井戸の数を表示するために右のY軸を使う井戸の数を別の系列に入れなければならない。これはまた、対数型である必要があります。

私はまた、（添付画像を参照してください。x軸上の最後のtickValueを抑制したいと思います：

Answer 1

右Y軸上のウェルの数を表示するには、あなたが必要となります第2のY軸を設定するには、以下のように配列にy軸を変更する必要があります。

yAxis: [{ 
    title: { text: 'Volume' }, 
    type: 'logarithmic' 
},{ 
    title: { text: 'Count' }, 
    type: 'logarithmic' 
}] 

はその後、あなたは各シリーズに使用している軸を指定する必要があります...それ以外の場合は、意志デフォルトは最初のシリーズです.0がボリューム軸、1がカウント軸です

series: [{ 
    name: 'Oil, bbl', 
    color: 'green', 
    data: #{oil_vol_array}, 
    pointStart: 1 
},{ 
    name: "Gas, Mcf", 
    color: 'red', 
    data: #{gas_vol_array}, 
    pointStart: 1 
},{ 
    name: 'Water, bbl', 
    color: 'blue', 
    data: #{water_vol_array}, 
    pointStart: 1 
},{ 
    name: 'Wells', 
    color: 'yellow', 
    data: #{wells_vol_array}, 
    pointStart: 1, 
    yAxis: 1 
}] 

Highcharts Demo for multiple axesには、より多くのオプション/情報があります。

実際のティックをどのように抑制するかはわかりませんが、最終的なカテゴリは簡単には表示されないようにすることができます。

var lastCategory = 'Jan 2040'; 

labels: { 
    rotation: -45, 
    align: 'right', 
    style: { 
     font: 'normal 13px Verdana, sans-serif' 
    }, 
    formatter: function() 
    { 
     return (this.value != lastCategory) ? this.value : ''; 
    } 
} 

は編集：ツールチップの情報を追加

おそらく最も簡単な方法は、オプションのラベルx軸に、フォーマッタを追加し、あなたがtickValueを表示したくないカテゴリのリストを定義することです

tooltip: { 
    shared: true 
}, 

それともに示すように、あなたは少し手の込んだ行くとフォーマッタを指定することができます：あなたは、単に（このHighcharts JSFiddleごとなど）にツールチップのオプションを変更することができ、ここで物事のカップルを、行うことができます。

私は非常にそれがかなりよく