选项卡宽度中的 Angular HighChart答案

【问题标题】：Angular HighChart in tabs width选项卡宽度中的 Angular HighChart
【发布时间】：2015-07-07 23:07:58
【问题描述】：

好的，所以我有以下 highChart 标签：

<highchart id="chart1" config="chartConfig" ></highchart>

现在在我的系统中，我有几个选项卡。恰好高位图不在第一个标签下。

现在当我按下包含图表的选项卡时，图表看起来有点奇怪：

（你看不出这张图片，但它只使用了总宽度的 30%）

但是更改浏览器大小，然后将其更改回正常图表将其正确地放置在元素内（如果我只是在选项卡内打开控制台，也会发生这种情况）：

我猜测它与元素创建后的宽度有关（可能是因为它在另一个选项卡中），但我不确定如何解决这个问题。

我尝试在包含 highchart 的元素上添加样式，使其看起来像这样：<highchart id="chart1" config="chartConfig style="width: 100%"></highchart>

但是这导致图表超出框架。

我的图表配置

    $scope.chartConfig = {
};

$scope.$watchGroup(['login_data'], function(newValues, oldValues) {

    // newValues[0] --> $scope.line
    // newValues[1] --> $scope.bar

    if(newValues !== oldValues) {
        $scope.chartConfig = {
            options: {
                chart: {
                    type: 'areaspline'
                }
            },
            series: [{
                data: $scope.login_data,
                type: 'line',
                name: 'Aktivitet'
            }],
            xAxis: {
                categories: $scope.login_ticks
            },
            title: {
                text: ''
            },
            loading: false
        }
    }
});

【问题讨论】：

However if i attempt to just quickly making the browser smaller and then back to full size the chart is correctly placed within the page 我不清楚你在说什么。你能改写吗？
你也可以发布你的图表配置吗？
不确定是什么问题，但请尝试使用size 配置选项。
@DavidGrinberg David 简而言之，问题是在页面加载时图表大约是元素宽度的 30%，但只要我对浏览器窗口执行操作，它就会稳定下来
我的意思是我得到了这个问题，我只是不知道如何解决它:)

标签： javascript css angularjs highcharts tabs

【解决方案1】：

调用 reflow 方法解决了我在模式中显示图表的类似问题。希望这对其他人有帮助：D

在 $scope.chartConfig 之后将其添加到您的控制器：

$scope.reflow = function () {
  $scope.$broadcast('highchartsng.reflow');
};

【讨论】：

【解决方案2】：

您可以在控制器中尝试以下操作之一吗？（或者两者兼而有之！）

$timeout(function() {
    $scope.chartConfig.redraw();
});

$timeout(function() {
    $scope.chartConfig.setSize();
});

【讨论】：