2017-08-08 76 views
1

我在想方法,用户可以点击一个按钮并导致Highcharts栏消失。如何使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”存在触发基于点击的功能,但我无法找到一个函数,当点击时,让一个Highchart栏消失。

+0

你能有关它的更多的specifica?它是在一个网页内,还是一个JS应用程序? –

+0

如果你想删除它.​​.点击该栏,获取栏的数据ID和更新图表的数据删除选定的数据ID –

+0

检查此http://jsfiddle.net/mgpz9p32/可能帮帮我。点击列删除 –

回答

1

消失在高图中的特定列。修改您的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演示