相同的代码生成两个图像。在第一张图片中，div（蓝色边框）被很好地填充了。在第二张图片中，左上角有足够的空间。我希望它始终像在第一张图像中那样填充 div。spacingTop: 0 似乎没有效果。我应该使用其他设置吗？
这是代码：
new Highcharts.Chart({
chart: {
animation: false,
renderTo: data.id,
type: 'column',
height: data.height,
backgroundColor: 'transparent',
spacingTop: 0
},
title: {
text: ''
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
var point = this.point;
setTimeout(function() {
point.dataLabel.attr({
y: point.name/1 > 0 ? point.plotY - 20 : point.yBottom - 20
});
});
return point.name;
}
},
pointWidth: 40,
borderWidth: 0
},
series: {
animation: false
}
},
xAxis: {
categories: [ data.labelActual, data.labelDelta, data.labelPlan ],
lineColor: '#CCCCCC',
labels: {
style: {
whiteSpace: 'nowrap', // This is not working
width: '200px' // This is the workaround
}
}
},
yAxis: {
title: {
text: ''
},
gridLineWidth: 0,
labels: {
formatter: function() {
if ((valuePlan < 0 || valueActual < 0) && this.value === 0) {
return '0';
}
return '';
}
},
plotLines: [ {
value: 0,
color: '#CCCCCC',
width: 1
} ],
opposite: true
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [ {
data: [
{
y: valueActual,
low: 0,
name: valueActual,
color: {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valueActual < 0 ? 13 : -5,
style: {
color: '#7F7F7F'
}
}
},
{
y: valueActual,
low: Math.abs(valueDelta) < 1 ? valueActual - 1 : valueActual - valueDelta,
name: valueDelta > 0 ? '+' + valueDelta : valueDelta,
color: valueDelta === 0 ? '#7F7F7F' : {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F' ],
[ 1, data.color === 'g' ? '#A2C0A8' : data.color === 'r' ? '#E29A9A' : '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valueDelta < 0 ? 13 : -5,
style: {
color: valueDelta === 0 ? '#7F7F7F' : data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F'
}
}
}, {
y: valuePlan,
low: 0,
name: valuePlan,
color: {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valuePlan < 0 ? 13 : -5,
style: {
color: '#7F7F7F'
}
}
} ]
} ],
tooltip: {
enabled: false
},
exporting: {
enabled: false
}
});