X轴应在高图表中的(0,0)处对齐

Question

当数据包含负值时，我想将x轴线和轴标签对齐在位置(0,0(。例如，考虑这个fiddle示例，其中负值栏向下，x轴设置为(0,0(http://jsfiddle.net/13d54mp8/2/

var YTD = 'YTD';
var yr1 = 'Year 1';
var yr3 = '*3 Year';
var yr5 = '*5 Year';
var sinceIN = '* Since Inception (5/31/2012)';

$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (-1) * (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
},
yAxis: {
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'
},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'
}
],
legend: {
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});

现在，我想使工作与倒置柱状图的用例相同，其中xaxis在顶部，yaxis在右侧。检查小提琴-http://jsfiddle.net/fa2e80qu/3/

var YTD = 'YTD'
var yr1 = 'Year 1'
var yr3 = '*3 Year'
var yr5 = '*5 Year'
var yr7 = '*7 Year'
var yr9 = '*9 Year'
var sinceIN = '* Since '
$(function() {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
events: {
load: function() {
var xx = (0.34)* (this.yAxis[0].translate(0, false, false));
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
},
title: {
text: 'Report Title',
style: {
fontSize: '18px',
color: '#1D5293',
fontWeight: 'bold'
},
},
subtitle: {
text: '(As of 6/30/2012)',
style: {
fontSize: '18px',
color: '#1D5293'
},
y: 40
},
xAxis: {
categories: [YTD, yr1, yr3, yr5, yr7,yr9, sinceIN],
lineColor: '#C1BADB',
tickWidth: 2,
opposite:true

},
yAxis: {
opposite:true,
reversed:true,
title: {
text: ''
},
lineColor: '#C1BADB',
lineWidth: 1,
labels: {
formatter: function() {
return this.value + '%';
}
},
gridLineWidth: 0,
tickWidth: 2
},
tooltip: {
enabled: true,
formatter: function() {
return this.series.name + ': ' + this.y + '%';
},
},
credits: {
enabled: false
},
series: [
{
name: 'XXX Company Ltd. (Net)',
data: [3.02, -0.61, 2.03, 1.51, 5.35, -0.50,2.5],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#1D5293'},
{
name: 'XXX Relative Return Index (Gross)**',
data: [2.45, 0.85, 4.11, 0.73, 3.56,-0.5,1.6],
dataLabels: {
enabled: true,
color: '#333',
formatter: function() {
return this.y + '%'
}
},
color: '#9E9E9E'}
],
legend: {
enabled:false,
layout: 'vertical',
align: 'top',
verticalAlign: 'top',
x: 50,
y: 65,
borderWidth: 0,
margin: 30
},
});
});
});

预期行为是使x轴线和标签在的位置(0,0(正确对齐

Answer 1

您可以使用toPixels方法：

chart: {
...,
events: {
load: function() {
var xx = this.yAxis[0].toPixels(0) - this.plotTop;
this.xAxis[0].axisGroup.translate(0, xx);
this.xAxis[0].labelGroup.translate(0, xx);
}
}
}

---

现场演示：http://jsfiddle.net/BlackLabel/07rej16z/

API参考：https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels