如何在Highcharts中设置绘图区的宽度和高度? [英] How to set plot area width and height in Highcharts?

查看:5682
本文介绍了如何在Highcharts中设置绘图区的宽度和高度?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在绘制由HighCharts中的一系列点组成的地图。我希望地图可以正确缩放并且是完美的方形。



因此,我将图表高度和宽度设置为相同的值:

  $(function(){
$('#map-container')。highcharts({
chart:{
类型:'scatter',
zoomType:'xy',
height:225,
width:225
},
title:{
text:null
},
字幕:{
text:null
},
yAxis:{
gridLineWidth:0,
minorGridLineWidth :0,
lineColor:'transparent',
minorTickLength:0,
tickLength:0,
min:<?php echo $ lat_bon_min;?>,
max:<?php echo $ lat_bon_max;?>,
labels:{
enabled:false
},
title:{
text :null
}

},
xAxis:{
gridLineWidth:0,
minorGridLineWidth:0,
lineColor:'transparent',
minorTickLength:0,
tickLength:0,
min:<?php echo $ lon_bon_min; ?>,
max:<?php echo $ lon_bon_max;
标签:{
启用:false
},
标题:{
文本:null
}

$,
tooltip:{
enabled:false,
},
plotOptions:{
series:{
marker:{
enabled :true,
符号:'circle',
radius:2
}
}
},

系列:[{
showInLegend:false,
type:'scatter',
color:'rgba(223,83,83,.5)',
data:map_data,
keys: ['time','x','y']
}]

});
});

问题是图表容器是一个正方形,但是绘图区域不是。



我做了一个结果截图。红线是地图,黑色方块是图表容器(这是一个完美的方形),蓝色矩形是你可以看到的绘图区域不是方形。



如何设置绘图区域大小才能使它成为完美的正方形?

解决方案

您可以使用新功能扩展Highcharts。在这里您可以找到关于扩展Highcharts的信息:
http:// www。 highcharts.com/docs/extending-highcharts/extending-highcharts



正如你在我的演示中看到的那样,我包装了setChartSize函数并给它们使用的可能性

 图表:{
plotAreaWidth:300,
plotAreaHeight:200
$,

函数还将绘图区放置在图表容器中间。



示例:
http:// jsfiddle。 net / izothep / eph5secj / 2 /

I'm plotting a map made by a series of points in HighCharts. I want that map to be properly scaled and be a perfect square.

Thus, i've set the chart height and width at the same value:

$(function () {
    $('#map-container').highcharts({
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            height: 225,
            width: 225
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },
        yAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lat_bon_min; ?>,
            max: <?php echo $lat_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        xAxis: {
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            lineColor: 'transparent',
            minorTickLength: 0,
            tickLength: 0,
            min: <?php echo $lon_bon_min; ?>,
            max: <?php echo $lon_bon_max; ?>,
            labels: {
                enabled: false
            },
            title: {
                text: null
            }

        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            series: {
                marker: {
                    enabled: true,
                    symbol: 'circle',
                    radius: 2
                }
            }
        },

        series: [{
            showInLegend: false,  
            type: 'scatter',
            color: 'rgba(223, 83, 83, .5)',
            data: map_data,
            keys: ['time', 'x', 'y']
        }]

    });
});

The problem is that the chart container is a square, but the plot area is not.

I made a screenshot of the result. Red line is the map, black square is the chart container (which is a perfect square), blue rectangle is the plot area which you can see is not a square.

How can i set plot area size in order to make it a perfect square?

解决方案

You can extend Highcharts with new function. Here you can find information about extending Highcharts: http://www.highcharts.com/docs/extending-highcharts/extending-highcharts

As you will see in my demo, I wrapped setChartSize function and give them possibility to use parameters from your chart options:

chart: {
  plotAreaWidth: 300,
  plotAreaHeight: 200
},

Function is also positioning your plot area in the middle of chart container.

example: http://jsfiddle.net/izothep/eph5secj/2/

这篇关于如何在Highcharts中设置绘图区的宽度和高度?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆