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

我有一个图表，其中我使用左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
      }]
    });
  });

$（文档）.ready（函数（）{
$（“#制表符”）.tabs（）；
新海图，海图({
图表：{
renderTo:“体积图表”，
类型：“行”
},
标题：{
正文：“#{title_text}”
},
xAxis：{
标题：{text:'Time Period'}，
滴答声间隔：{滴答声间隔}，
类别：#{x_数组}，
showLastLabel:true，
标签：{
轮调：-45，
对齐：“右”，
风格：{
字体：“普通13px Verdana，无衬线”
}
}        
},
亚克斯：{
标题：{text:'Volume'}，
类型：“对数”
},
工具提示：{
headerFormat:“{series.name}
”，
pointFormat:'Period={point.x}，Volume={point.y}'
},
图例：{
布局：“垂直”，
对齐：“右”，
垂直排列：“顶部”，
x:-20，
y:100，
边框宽度：0
},
打印选项：{
系列：{
标记：{
启用：false，
国家：{
悬停：{
已启用：true
}
}
}
}
},
系列：[{
名称：“石油，bbl”，
颜色：“绿色”，
数据：#{oil_vol_array}，
起点：1
},{
名称：“气体，Mcf”，
颜色：“红色”，
数据：#{gas_vol_array}，
起点：1
},{
名称：“水，bbl”，
颜色：“蓝色”，
数据：#{water_vol_array}，
起点：1
}]
});
});

油、气和水的体积分别见三个系列。我需要加入另一个井数系列，它使用右边的Y轴来显示井数。这也需要是对数类型

我还想抑制x轴上的最后一个滴答声值（请参见附图：

---

要显示右侧Y轴上的井数，您需要设置第二个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
}]

有更多可能有用的选项/信息

您可以很容易地抑制显示最终类别，但不确定如何抑制实际的勾号。最简单的方法可能是定义不希望显示勾号值的类别列表，然后向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 : '';
    }
} 

编辑：添加工具提示信息

您可以在此处执行几项操作，只需将工具提示选项更改为（如下所示）：

或者，您可以更进一步，指定一个格式化程序，如中所示

---

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

要在右Y轴上显示井的数量，您需要设置第二个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
}]

有更多可能有用的选项/信息

您可以很容易地抑制显示最终类别，但不确定如何抑制实际的勾号。最简单的方法可能是定义不希望显示勾号值的类别列表，然后向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 : '';
    }
} 

编辑：添加工具提示信息

您可以在此处执行几项操作，只需将工具提示选项更改为（如下所示）：

或者，您可以更进一步，指定一个格式化程序，如中所示

---

我强烈推荐它，它有很多很好的演示，谢谢你，先生，这正是我所需要的。yAxis:1位是我所缺少的。顺便说一下，我可以通过简单地在xAxis下设置showLastLabel:false来抑制最后一个类别值。工具提示是最后一位。你知道我怎样才能自定义新添加的“井”轴？它显示的是“体积”而不是“井”即使显示了正确的值？我真的很感谢你的帮助。哈哈，我错过了showLastLabel位…很好！我已经在我的回答中添加了工具提示块谢谢你的好心先生，这正是我需要的。yAxis:1位就是我错过的。顺便说一句，我可以通过简单地设置showLastLabel:f来抑制最后一个类别值alse——在xAxis下。工具提示是最后一位。你知道我如何为新添加的“井”轴自定义它吗？它显示的是“体积”，而不是“井”，即使显示的是正确的值？我真的很感谢你的帮助。哈哈，我错过了showLastLabel位…很好！我已经在我的答案中添加了工具提示