Highcharts: To rotate the chart 90 degree but also redraw it

问题

I'm trying to create a button that allows me to turn the chart from portrait orientation to landscape. So what I did is to add a class to the chart when button is clicked.

transform: translate(-50%, -50%) rotate(90deg);

It did but the chart went like this Rotated 90 degrees, but the chart didn't redraw to stretch full screen

And this will be what I wanted, Rotated 90 degrees, and fully stretched to the bottom of the screen

I wondered if there is a way to do so, by either using highchart's API or JS. Thanks!

回答1:

Not sure, if I understood you properly, but are you trying to change the chart orientation on a button click? I am not familiar with highcharts, but having a quick look at their API, something like this should be enough:

// ...
var hc = Highcharts.chart('container', { /* your options */ });
// ...
$('#goFS').click(function () {
    var w = 400;
    var h = 800;
    hc.update({
        chart: {
            height: h,
            width: w,
            inverted: true
        }
    });
});

Instead of hardcoded sizes, you could probably read and use the size of the container or the window, depending on your goal.

来源：https://stackoverflow.com/questions/50343437/highcharts-to-rotate-the-chart-90-degree-but-also-redraw-it