web-dev-qa-db-fra.com

Désactiver-cliquer sur la légende dans le graphique de colonnes HighCharts

J'essaie simplement de désactiver l'effet DRILL-DOWN sur mon "Graphique à colonnes". Quelqu'un peut-il aider? Voici l'exemple de code sur Fiddle http://jsfiddle.net/D8Ez3/

* comme vous pouvez le voir, la légende du graphique est cliquable. J'ai besoin que les éléments de la légende ne soient pas cliquables, car lorsque vous cliquez sur tous les éléments, le graphique est vide. Je préfère ne pas avoir d’exploration pour le graphique. Des idées?

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] }]
      });
javascripthighcharts
25
MizAkita

Tu étais proche. Au lieu de:

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

Tu veux:

plotOptions: {
    column: {
        pointPadding: 0.2,
        size: '95%',
        borderWidth: 0,
        events: {
            legendItemClick: function () {
                return false; 
            }
        }
    },
    allowPointSelect: false,
},
44
Matt

Et si vous travaillez avec des tartes, vous devez faire:

    pie: {
       showInLegend: true,
       allowPointSelect: false,
       point:{
           events : {
            legendItemClick: function(e){
                e.preventDefault();
            }
           }
       }
   }
15
Lachezar Raychev

Ceci est le moyen de rendre les légendes du graphique Highcharts non cliquables, car chaque fois que vous cliquez sur une légende particulière, la tranche correspondante disparaît du graphique. 

  plotOptions: {
        column: {
            pointPadding: 0,
            borderWidth: 1,
        },
        series: {
            events: {
                legendItemClick: function (e) {
                    e.preventDefault();
                }
            }
        }
    }
3
alfishan aqeel

Si vous utilisez ES6 vous pouvez le rendre encore plus court avec la fonction flèche, car il pointe vers élément DOM , vous pouvez simplement retourner false ...

{
  name: 'Name of this chart',
  type: 'line',
  lineWidth: 1,
  color: '#333333',
  events: {
    legendItemClick: () => false  // disable legend click
  },
  data: [1, 5, 10, 8, 19, 28, 0 , 12]
};
0
Alireza

Voici un JSFiddle démontrant comment y parvenir:

plotOptions: {
        series: {
            events: {
                legendItemClick: function () {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    if (!confirm('The series is currently ' +
                   **strong text**              visibility + '. Do you want to change that?')) {
                        return false;
                    }
                }
            }
        }
    }
0
MoneerOmar