ng高图表的响应行为，加载时隐藏编译的ng点击xAxis标签

Responsive behaviour for ng-highcharts with compiled ng-click on xAxis labels hidden on load

本文关键字：ng 隐藏 编译 xAxis 标签 点击 高图表 响应 加载      更新时间：2023-09-26

我在选项卡中有一些ng高图表，第一页上的折叠部分也按下拉选择显示。所有图表都需要适合其容器的大小（容器大小不同）。

其中一个图表上的xAxis标签添加了一个ng点击，它可以在加载时超时和编译，但当图表在调整大小时重新绘制时，这些标签就会丢失。

需要全幅图表以及加载时隐藏的所有图表的响应行为，并在调整大小后保持ng点击。

jQuery是NOT用于该项目，因此正在寻找一个有角度的/本地的javascript解决方案。

下面是当前问题的例子。

http://jsfiddle.net/7efavzh2/2/

以下内容将更新图表的宽度，但会打断所有已编译的ng单击标签。

$scope.collapseClick = function() {
    console.log('collapse click');
    //$scope.projectionChartConfig.options.chart.width = null;
}

向窗口添加了一个调整大小事件。在显示图表或调整大小时更新图表的宽度参数。还可以在超时内编译，以便在需要的地方保持ng个点击标签。

$scope.collapseClick = function() {
    console.log('collapse click');
    $scope.projectionChartConfig.options.chart.width = null;
    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
}
// Listen to window resize and update width.
$scope.$on('window.resize', function() {
    console.log('resize');
    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
});

http://jsfiddle.net/7efavzh2/3/

相关文章：