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