Question

我试图想办法用户可以点击按钮并使Highcharts栏消失。

例如，在我的Highcharts代码中：

$(function(){
  Highcharts.setOptions({
  colors:['#49acdd'],
  chart:{
    style: {
      fontFamily:'Helvetica',
      color:'#384044'
    }
  }
});

$("#chart").highcharts({
  chart: {
    type:'column',
    backgroundColor:'#158479'
  },
  title: {
    text: "Employer Organizations",
    style: {
      color: "#8A2BE2" //wmakes the text white
    }
  },
  xAxis: {
    tickWidth: 1,
    labels: {
      style: {
        color: '#cc3737'
      }
    },
    categories:[
      'Educational and School-Based','Government Orgs','Charitable Foundation Orgs','Health-care Orgs','Market Research Orgs','Technology Firms','Human Service Orgs','Accounting/Finance Firms'
    ]
  },
  yAxis: {
    gridLineWidth:0, //no gridlines
    title: {
      text:'',
      style:{
        color:'#fff'
      }
    },
    labels: {
      formatter:function(){
        return Highcharts.numberFormat(this.value,0,'', ' ,');//returns ex: 1000 to 1,000
      },
      style:{
        color:'#33FF00'
      }
    }
  },//end of y axis
  plotOptions:{
    column: {
      borderRadius: 4,
      pointPadding:0,//paddin between each column or bar
      groupPadding:0.1//Padding between each value groups, in x axis units
    }
  },
  series: [{
    name: "Employer Organizations",
    data: [1,2,3,4,5,6,7,8]
  }]
});
});

我知道“plotOptions.bar.events.click”存在用于触发基于点击的功能，但是我无法找到一个让单击栏在点击时消失的功能。

Answer 1

消失在highcharts中的特定列。修改您的plotOptions

plotOptions: {
 column: {
    borderRadius: 4,
    pointPadding: 0, //paddin between each column or bar
    groupPadding: 0.1 //Padding between each value groups, in x axis units
  },
  series: {
    point: {
      events: {
        click: function() {
          if (!confirm('Do you really want to remove this column?')) {
            return false;
          } else {
            this.remove();
          }
        }
      },

    }
  }
},

Fiddle演示

如何使Highcharts栏消失？

1 个答案: