1

左の 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 を抑制したいと思います (添付の画像を参照してください:

チャート表示

4

1 に答える 1

1

右側の Y 軸にウェルの数を表示するには、2 つ目の Y 軸を設定する必要があります。以下のように、yAxis を配列に変更する必要があります。

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 には、役立つオプション/情報がさらにあります。

最終的なカテゴリが簡単に表示されないようにすることはできますが、実際の目盛りをどのように抑制するかはわかりません。おそらく最も簡単な方法は、tickValue を表示したくないカテゴリのリストを定義し、フォーマッタを xAxis ラベル オプションに追加することです。

var lastCategory = 'Jan 2040';

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

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

ここでいくつかのことを行うことができます。ツールチップ オプションを次のように変更するだけです (このHighcharts JSFiddle に従って)。

tooltip: {
    shared: true
},

または、この他の Highcharts JSFiddleに示されているように、少し手の込んだフォーマッターを指定することもできます。

Highcharts Referenceを強くお勧めします。多数の優れたデモが配置されています。

于 2012-04-16T05:00:35.350 に答える