如果图形太宽,则不显示highcharts y轴,但仅限于某些浏览器

时间:2014-01-16 19:44:21

标签: javascript graph highcharts

我在桌子里面有六张图; 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/

0 个答案:

没有答案