Highcharts：旋转图表90度，但也重画它 [英] Highcharts: To rotate the chart 90 degree but also redraw it

问题描述

我试图创建一个按钮，让我可以将图表从纵向转为横向。
所以我做的是在点击按钮时添加一个类到图表中。

transform：translate（-50％ -50％）rotate（90deg）;

确实如此，图表就像这样
旋转90度，但图表没有重绘为
全屏扩展

这就是我想要的，旋转90度，完全拉伸到屏幕底部

我想知道是否有办法通过使用highchart的API或JS。谢谢！

解决方案

不知道，如果我正确理解了你，但你是否试图改变按钮上的图表方向？我不熟悉highcharts，但快速浏览一下他们的API，这样的应该就足够了：

  // ... 
 var hc = Highcharts.chart（'container'，{/ * your options * /}）; 
 // ... 
 $（'＃goFS'）。click（function（）{
 var w = 400; 
 var h = 800; 
 hc .update（{
图：{
 height：h，
 width：w，
 inverted：true 
} 
}）; 
 }）; 
  

代替硬编码大小，您可能会读取并使用容器或窗口的大小，具体取决于在你的目标上。

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!

解决方案

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：旋转图表90度，但也重画它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！