选项卡宽度

Question

好的，我有以下highChart标签：

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

现在我的系统中有几个标签。恰好是高图表不在第一个标签下。

现在当我按下包含图表的标签时，图表看起来很奇怪：

（你不能从这张图片中说出来，但它只占总宽度的30％）

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

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

我试图在包含高图的元素上添加一个样式，使其看起来像这样：<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
        }
    }
});

Answer 1

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

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

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

Answer 2

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

在 $ scope.chartConfig ：

之后将其添加到您的控制器

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