Highcharts - 三个系列使用左 Y 轴，第四个系列使用右 Y 轴

Question

我有一个图表，其中使用左侧 Y 轴显示三个体积系列（石油、天然气和水）。我需要使用沿右轴的不同比例在此图表上显示另一个系列的井数。代码如下：

  $(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
      }]
    });
  });

分别查看石油、天然气和水量的三个系列。我需要输入另一个系列的井数，它使用右侧的 Y 轴来显示井数。这也需要是对数类型。

我还想抑制x轴上的最后一个tickValue（请看附图：

Answer 1

要在右侧 Y 轴上显示孔的数量，您需要设置第二个 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 for multiple axes 有更多可能有用的选项/信息。

您可以很容易地抑制最终类别的显示，但不确定如何抑制实际的刻度。可能最简单的方法是定义一个您不想为其显示 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
},

或者你可以更花哨一点，指定一个格式化程序，如this other Highcharts JSFiddle所示。

我强烈推荐Highcharts Reference，它的布局非常好，有很多很好的演示