我试图在图表和绘图区域之间添加填充，如下面的屏幕截图所示，标记在绘图区域的边界上溢出。
我有办法在绘图区域的底部添加填充，还是有办法稍微上移图表系列以免溢出？
这是一个小提琴：http://jsfiddle.net/H3Asy/5/
这是JS代码：
$('#container').highcharts({
chart: {
type: 'areaspline',
marginLeft: 25,
plotBorderWidth: 2,
plotBackgroundColor: {
linearGradient: [0, 0, 0, 178],
stops: [
[0.5, 'rgb(255, 255, 255)'],
[1, 'rgb(221, 221, 221)']
]
},
events: {
load: function(){
this.plotBackground.attr({ rx: 15, ry: 15 });
this.plotBorder.attr({ rx: 15, ry: 15 });
}
}
},
legend: {
enabled: false
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
title: {
text: ''
},
subtitle: {
text: ''
},
xAxis: {
categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22],
lineWidth: 0,
minorGridLineWidth: 0,
lineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
labels: {
rotation: -90,
align: 'right',
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
x: 5,
y: 28
}
},
yAxis: {
title: {
text: ''
},
labels: {
formatter: function() {
if(this.isFirst) {
return this.value;
}
return bytesToSize(this.value, 0, true);
},
style: {
fontSize: '12px',
fontWeight: 'bold',
fontFamily: 'Sterling, sans-serif',
color: '#999'
},
align: 'center',
x: -16,
y: 12
},
gridLineColor: 'transparent'
},
tooltip: {
shared: true,
formatter: function() {
var tooltip = $('<div>');
var total = 0;
$.each(this.points, function(i, point){
total += this.y;
tooltip.append($('<div style="color: ' + point.series.area.fill + ';">').html(point.series.name + ': ' + bytesToSize(this.y,2)));
if(!(i % 2)){
tooltip.append('<br />');
}
});
tooltip.prepend($('<div style="color: #999;">').html('Total: ' + bytesToSize(total,2) + '<br />'));
return tooltip.get(0).outerHTML;
}
},
plotOptions: {
areaspline: {
lineWidth: 1.3,
marker: {
states: {
hover: {
radius: 5
}
}
},
states: {
hover: {
lineWidth: 1.3
}
}
}
},
series: [{
name: 'Download',
fillColor: 'rgba(0, 140, 194, 0.3)',
lineColor: '#008cc2',
data: [0,4815834355,23055591595,0,0,15404821463,0,20217522975,5521887522,0,0,1371666239,2134496,0,2948406184,12384283037,8231543133,9268703354,11368292543,1747717890,4540649201,4705338812]
}, {
name: 'Upload',
fillColor: 'rgba(117, 0, 198, 0.4)',
lineColor: '#7500c6',
marker: {
enabled: false,
states: {
hover: {
enabled: false
}
}
},
data: [0,201112067,1160271286,0,0,748962337,0,2289905587,211355292,0,0,64669389,559747,0,368939264,954704437,385646325,453112460,251406236,131414580,312915384,153890742]
}]
});
最佳答案
没有完美的解决方案，只有两个解决方法：
为xAxis设置min和startOnTick，演示：http://jsfiddle.net/H3Asy/6/
yAxis: {
min: -1024 * 1024 * 1024,
startOnTick: false,
}
设置系列的阈值并为xAxis设置startOnTick，演示：http://jsfiddle.net/H3Asy/7/
yAxis: {
startOnTick: false
},
plotOptions: {
areaspline: {
threshold: -1
}
}
关于javascript - Highcharts AreaSpline-在图表和绘图区域之间添加填充，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20976446/