好的,所以我有以下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
        }
    }
});

最佳答案

您可以在 Controller 中尝试以下方法之一吗? (或者可能两者都有!)

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

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

10-05 20:49
查看更多