如何在highcharts-ng中隐藏导出按钮

时间:2015-01-07 22:30:10

标签: angularjs highcharts highcharts-ng

我使用Angularjs和highcharts-ng库我希望有一个高图指令能够导出图表(显示导出按钮)而另一个没有该选项(不显示导出按钮)但是我没有设法使用配置对象禁用(隐藏)按钮。我怎么能这样做?

这是片段



var app = angular.module('app', ['highcharts-ng']);

app.directive('myChart', function(){
  return {
    restrict: 'E',
    scope: {},
    template: '<highchart config="chartConfig"></highchart>',
    link: function(scope, element, attrs) {
      scope.chartConfig = {
        options: {
          exporting: {
            enabled: false
          }
        }
      };
    }
  };
});
&#13;
<div ng-app="app">
    <my-chart></my-chart>    
<div>

<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script src="https://rawgit.com/pablojim/highcharts-ng/0.0.7/src/highcharts-ng.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
&#13;
&#13;
&#13;

即使禁用导出属性

4 个答案:

答案 0 :(得分:2)

var HighChartChartModel = { options: { exporting: { enabled: false }, chart: { type: 'bar' } },

这将有效

答案 1 :(得分:2)

以下是在highcharts-ng中执行此操作的正确方法:

选项:{         图表:{           类型:'酒吧'         },         出口:{           启用:false         }       },

请注意,导出与图表处于同一级别。

答案 2 :(得分:1)

看起来像是highcharts-ng中的一个错误。

如果您只是不包含exporting.js,则无法获得该按钮。

工作小提琴here

答案 3 :(得分:1)

我遇到了同样的问题,因为常规选项不知何故不起作用,我只需要用一些CSS和javascript(jQuery)隐藏它。

$('.highcharts-button').css('display': 'none');