如果没有图表,如何禁用打印图表按钮

时间:2015-07-09 07:43:34

标签: jquery asp.net-mvc-4 highcharts

我有以下代码

$.ajax({
        url: '@Url.Action("CollectionsBySuburb", "DashBoard")',
        data: { Period: 2015 },
        success: function (data) {
            var catArr = data.map(function (o) { return o.Category; });
            var paidArr = data.map(function (o) { return parseInt(o.TotalTax + o.TotalArrears + o.TotalDiscount); });
            var outArr = data.map(function (o) { return parseInt(o.TotalBillAmount - (o.TotalTax + o.TotalArrears + o.TotalDiscount)); });

            $('#CollectionsBySuburb').highcharts({
                chart: {
                    type: 'bar',
                    events: {
                        click: function () {
                            alert();
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                colors: ["#62BD00", "#FA1B02"],
                title: {
                    text: 'Amount  Collection By Suburb'
                },
                xAxis: {
                    categories: catArr
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Amount  ( '' )'
                    }
                },
                legend: {
                    reversed: true
                },
                plotOptions: {
                    series: {
                        stacking: 'normal'
                    }
                },
                tooltip: {
                    pointFormat: '<span style="color:{point.color}">{series.name}</span>: GH₵ <b>{point.y}</b>'
                },
                series: [{
                    name: 'Paid',
                    data: paidArr
                }, {
                    name: 'Outstanding',
                    data: outArr
                }]
            });
        }
    });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });
 $.ajax({
 //Rendering other chart here
 });

所以现在我的要求是因为当我点击打印按钮时我有多个图表我想检查图表是否存在然后启用选项,以便用户可以下载它,否则隐藏下载选项。我试过用不同的方法但不能这样做。任何帮助表示赞赏。

enter image description here

3 个答案:

答案 0 :(得分:1)

你可以使用 exporting: { enabled: false }

at highchart construct function。

http://api.highcharts.com/highcharts#exporting

答案 1 :(得分:1)

我不完全理解你的要求,所以我将演示不同的技巧。

  1. 如果没有可用数据,请禁用导出按钮:

    exporting: {
        enabled: data.length > 0 ? true : false
    }
    
  2. http://jsfiddle.net/v08j30n3/1/

    1. 删除特定按钮(伪条件):

      function filterButtons(data) {
      
          //get default buttons
          var options = Highcharts.getOptions();
          var defaultButtons =   options.exporting.buttons.contextButton.menuItems;
          var wantedButtons = [];
          // add your condition here. I simply remove the printChart button.   
          for (var button in defaultButtons) {
              if(defaultButtons[button].textKey !== 'printChart') {
                  wantedButtons.push(defaultButtons[button]);
              } else {
                  if (data.length > 0) {
                     wantedButtons.push(defaultButtons[button]);
                  }
              }
      
          }
      return wantedButtons;
      }
      
    2. 然后在你的高潮图对象中

      exporting: {        
              buttons: {
                  contextButton: {
                      menuItems:   filterButtons(data)
                   }
             }
      

      请参阅此处的代码:http://jsfiddle.net/v08j30n3/4/

答案 2 :(得分:1)

您可以捕获legendItemClick然后迭代所有系列以检查是否所有系列都被隐藏。如果是,那么您可以通过this.chart.exportSVGElements[0].hide();功能隐藏按钮。

events: {
                legendItemClick: function () {
                    var series = this.chart.series,
                        index = this.index,
                        allHidden = this.visible ? false : true;

                    $.each(series, function(i, serie){
                        if(serie.visible && i !== index)
                            allHidden = true;
                    });

                    if(!allHidden) {
                        this.chart.exportSVGElements[0].hide();
                    } else {
                        this.chart.exportSVGElements[0].show();
                    }

                }
            }

示例:http://jsfiddle.net/jL0u6o82/

相关问题