使用 JavaScript 更改 Highcharts 的高度。默认情况下，仅在窗口重新调整大小时重新调整大小

Posted 2023-03-06

【中文标题】使用 JavaScript 更改 Highcharts 的高度。默认情况下，仅在窗口重新调整大小时重新调整大小

【英文标题】：Change height of Highcharts with JavaScript. By default only re-sizes on window re-size

【发布时间】：2015-10-23 12:43:48

【问题描述】：

我们在我们的应用程序中使用HighCharts，并且我添加了一个函数来扩展图表全尺寸。我更改样式并使用 javascript 更改 div 的高度。

但是，在您实际调整浏览器窗口大小之前，没有任何变化。还有其他人遇到这个问题吗？

<section id="highchart-container" ng-class="'high-chart-expanded' : highChartMax">
    <highchart id="chart1" config="chartConfig" style="height:auto"></highchart>
</section>

ChartHeader 范围

function expandChartPanel() 
    vm.chartMaxed = !vm.chartMaxed;
    highChart     = ScopeFactory.getScope('highChart');

    if (vm.chartMaxed) 
        highChart.highChartMax = true;
    
    else 
        highChart.highChartMax = false;
    

    highChart.toggleChartSize();

HighChartDirective 范围

function toggleChartSize() 
    var chart1 = document.getElementById("chart1");

    if (vs.highChartMax) 
        chart1.style.height = "100%";
     else 
        chart1.style.height = "400px";
    

样式（SASS）

.high-chart-expanded 
    min-height: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;

    #highcharts-6,
    #chart1,
    .highcharts-background,
    .highcharts-container 
        min-height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        height: 100% !important;
    

HighChart 图表配置

ApiFactory.quotes(buildFullUrl(url)).then(function (data) 
    var quote_data = formatQuotes(data, 'quotes');

    // Create the chart
    vs.chartConfig = 
        options: 
            legend:  
                itemStyle:  
                    color: "#333333", 
                    cursor: "pointer", 
                    fontSize: "10px", 
                    fontWeight: "normal" 
                ,
                enabled: true, 
                floating: true, 
                align: 'left', 
                verticalAlign: 'top', 
                x: 60 
            ,
            chart : 
                zoomType: 'x',
                events: 
                    load: function () 
                        // HighChart loaded callback:
                        broadcastChartloaded();
                    
                
            ,

这是我在安慰 chartConfig 时看到的内容

console.log('highChart.chartConfig = ', highChart.chartConfig);

【问题讨论】：

你可以通过触发“reflow”事件来解决这个问题，使用 jquery/plain javascript（在 IE 上是 fireEvent，在大多数其他浏览器上是 w3c 的 dispatchEvent。）

我仍然无法让回流甚至正常工作，图表不会自动调整大小

看看这些：jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/…

【参考方案1】：

试试chart.setSize(width, height)？

这是一个有效的example

更新：用于角度指令

要从指令中提取图表对象，您可以走 jQuery 路线：

var chart = $('#theChart').highcharts();
chart.setSize(width, height);

专门针对ng-highcharts 用户，以下是指令作者推荐的拉出高位图表对象的方法。上述方法也可以正常工作。

var chart = this.chartConfig.getHighcharts();
chart.setSize(width, height);

虽然您可以在控制器/指令/服务中的任何位置执行此操作，但如果您严格遵循 Angular 设计模式，我建议您创建一个返回此对象的新服务，然后将其注入您的控制器中，但如果不是只要这两条线在您可以访问chartsConfig 对象的任何地方都可以正常工作。

要将图表重置为响应式，请再次查看answer。

【讨论】：

看起来您将其用作角度指令。应该可以正常工作，现在就像您的代码示例一样。您将不得不从指令中提取图表对象。你在使用github.com/pablojim/highcharts-ng 吗？

是的，这就是我们正在使用的，你说的拉出对象是什么意思？

尝试完全不使用 jQuery，只使用var chart = chart1.highcarts()' 但获取chart1.highcarts 不是一个函数:(

哦，当我将它放入配置 size: width: 1000, height: 1000 , 时，这有效，现在只需要弄清楚如何即时更新这些值

这就是我不喜欢 highcharts 的地方，但是这个问题也有解决办法。如果你使用 chart.setSize 路线。一旦你想摆脱自定义大小，只需调用不带参数的 chart.setSize()。图表现在消失了，然后只需将容器上的 css 高度更改回小一次，然后自动调整大小就开始了.. 它可以看起来无缝.. 当你添加一个新问题时让我知道.. 我也许可以修改最后一个 jsfiddle 来演示这个..