How to set plot area width and height in Highchart

问题:

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?

回答1:

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/

回答2:

In your chart default values of spacing are used and the biggest is a bottom spacing with value of 15 while others are of value 10 each. When setting all spacing to 15 you will get a square (196 x 196 px).

Example: http://jsfiddle.net/5825mzLs/

回答3:

You might want to use marginLeft, marginRight, marginTop and marginBottom properties.

The margin options (marginLeft, marginTop etc) give the margin to the actual plot area and does not apply to other elements on the chart (labels, legend etc)

See example in Hightscharts Docs: https://www.highcharts.com/docs/chart-design-and-style/design-and-style