2015-08-28 103 views
0

我有一个Angular webapp,我使用Highcarts来显示数据。该图表最初配置如下。在使用Highcharts试图隐藏/显示系列

<div class="panel-body" id="report-display normalchart" ng-if="!productMonthlyChart"> 
    <highchart id="chart1" config="chartConfig"></highchart> 
</div> 

使用函数I将数据推入图像下面

$scope.chartConfig.series.length = 0 
     # Set title and chart time and and name 
     $scope.chartConfig.xAxis.categories = ['Build Overview'] 
     $scope.chartConfig.options.chart.type = 'column' 
     $scope.graphName = 'Column Chart' 
     $scope.chartConfig.series.push({name: 'Admitted', data: [$scope.fullBuildTotals.admitted]}) 
     $scope.chartConfig.series.push({name: 'Deprecated', data: [$scope.fullBuildTotals.deprecated]}) 

我需要一个控制器(I使用的CoffeeScript)

$scope.chartConfig = { 
     options: 
      chart: 
       type: 'spline' 
       plotBackgroundColor: null 
      legend: 
       enabled: true 
      title: 
       text: '' 
      subtitle: 
       text: '' 
      exporting: 
       url: $config.exportAddress 
       width: 1000 
     series: [{ 
      name: '' 
      data: [ 
      ] 
      },{ 
      name: '' 
      data: [ 
      ] 
      }] 
     loading: false 
     xAxis: 
      categories: [ 
      ] 
      title: 
       text: '' 
     yAxis: 
      title: 
       text: '' 
     useHighStocks: false 
     size: 
      height: 500 
    } 

而在HTML显示能够在图表上显示和隐藏系列但是我无法使用以下显示或隐藏代码使其工作

$scope.chartConfig.series[0].show() 
$scope.chartConfig.series[0].hide() 

我得到以下错误控制台

类型错误:$ scope.chartConfig.series [0] .hide不在范围功能 $ scope.showCurrentBuildReportChartData

不会。任何人都有任何想法,为什么这可能会发生?我还遇到了代码,您可以通过调用一个highcharts()函数来选择该图表所包含的DIV来获取图表,但那也不起作用。

+0

它没有工作,因为你试图调用图表配置对象上的显示/隐藏方法。您需要获取图表的实际实例,然后调用这些方法。有了jQuery,你可以通过$(chartContainer).highcharts() – Buksy

回答

1

找到一个解决方案,不知道为什么系列[0] .show()和.hide()不起作用,但替代方法是直接做这些功能做的事情。

$scope.chartConfig.series[0].visible = true 
$scope.chartConfig.series[0].visible = false 

上面的代码完美地工作。