我在桌子里面有六张图; 2到一排。每个图表都是600x600,在Firefox中看起来非常好。但是,当我在Chrome或Internet Explorer中查看它们时,特别是一个图形无法完全呈现,如下所示:http://i.imgur.com/NUzyi2L.png。如果我将此图形的宽度从600更改为500,则会显示应该显示的宽度。如果我将它增加到500以上,甚至到505,它就不能完全呈现。可能导致这种情况的原因是什么?
**编辑:看起来取出'logarithmic'也可以显示y轴。
这是我的代码:
$('#usbm').highcharts({
chart: {
type: 'scatter',
height:600,
width:600
},
title: {
text: 'Peak Particle Velocity Vs. Frequency'
},
xAxis: {
min: 1,
max: 100,
type: 'logarithmic',
title: {
text: "Frequency (Hz)"
},
labels: {
overflow: 'justify'
},
tickmarkPlacement: 'on',
minorTickInterval:.1,
gridLineWidth: 1
},
yAxis: {
min: 0.01,
max: 10,
type: 'logarithmic',
tickmarkPlacement: 'on',
minorTickInterval:.1,
gridLineWidth: 1,
title: {
text: 'Velocity (in/sec)'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
scatter: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: 'PPV: {point.y}in/sec<br>FREQ: {point.x}Hz'
}
},
line: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.y}in/sec<br>FREQ: {point.x}Hz'
}
}
},
legend: {
layout: 'horizontal',
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
series:series
}, function(chart)
{ // on complete
chart.renderer.text('0.03 inches', 90,250)
.attr({
rotation: -30
})
.css({
color: '#000000',
fontSize: '16px'
})
.add();
});
这里是我实际代码的小提琴:http://jsfiddle.net/Pudge/9VV29/11/