我有一个图表,我用左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(请参阅附图:
答案 0 :(得分: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它与各种好的演示相得益彰