用JavaScript改变高图表的高度。默认情况下，仅在窗口调整大小时才重新调整大小。

Question

我们在应用程序中使用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 chartConfig

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);

​

​

Answer 1

试试chart.setSize(width, height)？

这是一个工作的示例

更新:用于角指令

要从指令中提取图表对象，只需执行jQuery路由：

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

特别是对于ng-高级图表用户，下面是指令作者建议如何提取高图表对象的方法。上述方法也会工作得很好。

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

尽管您可以在控制器/指令/服务中的任何地方执行此操作，但我建议您创建一个返回此对象的新服务，如果严格遵循角度设计模式，则将其注入控制器，但如果不只是这两行，那么在您可以访问chartsConfig对象的任何地方都可以很好地工作。

将图表重置为响应性，再次检查此回答。