Question

我们在我们的应用中使用了HighCharts，并且我添加了一个扩展图表fullsize的功能。我改变了样式以及使用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)？

这是一个有效的example

更新：用于角度指令

要从指令中拉出图表对象，您可以转到jQuery路径：

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

特别是对于ng-highcharts用户，这是建议如何通过该指令的作者提取高图表对象。上面的方法也可以正常工作。

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

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

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

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

1 个答案: