禁用 - 单击HighCharts柱形图中的图例

Miz*_*ita 27 javascript highcharts

我只是想在我的'柱形图'上禁用DRILL-DOWN效果.有人可以帮忙吗?以下是Fiddle http://jsfiddle.net/D8Ez3/的示例代码

*如您所见,图表的图例是可点击的.我需要图例中的项目不可点击,因为当您单击所有项目时,图表将返回空白.我宁愿不对图表进行深入研究.有任何想法吗?

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'impact',
        type: 'column',
        margin: [0, 0, 0, 0],
        spacingTop: 0,
        spacingBottom: 0,
        spacingLeft: 0,
        spacingRight: 0,
        backgroundColor: null,
        events: {
            load: function (event) {
                console.log(this);
            }}},
    exporting: {
       buttons: { 
       exportButton: {
       enabled:false
    },
    printButton: {
        enabled:false
    }}},
credits: {
        enabled: false
    },
    title: {
        text: ''
    },
    subtitle: {
        text: ''
    },
    xAxis: {
        categories: ['Reporting Year']
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Millions (mm)'
        }
    },
    legend: {
    enabled:false,
        layout: 'vertical',
        backgroundColor: '#FFFFFF',
        align: 'left',
        verticalAlign: 'top',
        x: 50,
        y: 30,
        floating: true,
        shadow: true
    },
    tooltip: {
        formatter: function () {
            return '' + this.x + ': ' + this.y + ' mm';
        }
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            size: '95%',
            borderWidth: 0},
    point: {
                events: {
                    legendItemClick: function () {
                        return true; // <== returning false will cancel the
                        default action }}},
            allowPointSelect: false,
    },
    series: [{
        name: 'Yr 1',
        data: [23.7] }, 
    {
        name: 'Yr 2',
        data: [13.6] }, 
    {
        name: 'Yr 3',
        data: [49.9] }, 
    {
        name: 'Yr 4',
        data: [83.6] }]
      });
Run Code Online (Sandbox Code Playgroud)

Mat*_*att 47

你很亲密 代替:

plotOptions: {
    column: {
        pointPadding: 0.2,
        size: '95%',
        borderWidth: 0
    },
    point: {
            events: {
                legendItemClick: function () {
                    return false; // <== returning false will cancel the default action
                }
            }
    },
    allowPointSelect: false,
},
Run Code Online (Sandbox Code Playgroud)

你要:

plotOptions: {
    column: {
        pointPadding: 0.2,
        size: '95%',
        borderWidth: 0,
        events: {
            legendItemClick: function () {
                return false; 
            }
        }
    },
    allowPointSelect: false,
},
Run Code Online (Sandbox Code Playgroud)

  • @RahulTailwal,用饼图做这个,你想要[`plotOptions.pie.point.events.legendItemClick`](http://api.highcharts.com/highcharts#plotOptions.pie.point.events) - 它只是这样发生'legendItemClick`属性的锚片段似乎不起作用,所以我没有直接链接到它.来自[`API docs for plotOptions.pie.events.legendItemClick`](http://api.highcharts.com/highcharts#plotOptions.pie.events.legendItemClick):*"不适用于馅饼,因为图例项目是每点.见point.events."* (7认同)

Lac*_*hev 15

如果您使用馅饼,您必须:

    pie: {
       showInLegend: true,
       allowPointSelect: false,
       point:{
           events : {
            legendItemClick: function(e){
                e.preventDefault();
            }
           }
       }
   }
Run Code Online (Sandbox Code Playgroud)