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.

文章来源: Highcharts: To rotate the chart 90 degree but also redraw it