如何在Highcharts中设置绘图区的宽度和高度? [英] How to set plot area width and height in 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屋!