it-swarm.com.de

Deaktivieren: Klicken Sie im HighCharts-Säulendiagramm auf Legende

Ich versuche einfach, den DRILL-DOWN-Effekt in meinem Säulendiagramm zu deaktivieren. Kann jemand helfen? Hier ist der Beispielcode unter Fiddle http://jsfiddle.net/D8Ez3/

* Wie Sie sehen können, ist die Legende des Diagramms anklickbar. Ich muss die Elemente in der Legende nicht anklickbar sein, da das Diagramm leer ist, wenn Sie auf alle Elemente klicken. Ich habe lieber keinen Drilldown für das Diagramm. Irgendwelche Ideen?

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

Du warst nah. Anstatt:

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

Sie wollen:

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

Und wenn Sie mit Kuchen arbeiten, müssen Sie Folgendes tun:

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

Auf diese Weise können Legenden des Highcharts-Diagramms nicht anklickbar gemacht werden. Wenn Sie auf eine bestimmte Legende klicken, werden die entsprechenden Slices aus dem Diagramm verschwinden. 

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

Wenn Sie ES6 verwenden, können Sie es mit der Pfeilfunktion noch kürzer machen, da sie auf DOM-Element verweist. Sie können einfach false ... zurückgeben.

{
  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]
};
1
Alireza

from Highcharts JS API-Dokumentation (v7.1.1)

"Die Standardaktion besteht darin, die Sichtbarkeit des Punkts umzuschalten. Dies kann durch Aufrufen von event.preventDefault () verhindert werden."

Das hat bei mir für Tortendiagramme funktioniert -

    plotOptions: {
        pie: {
            point: {
                events: {
                    legendItemClick: function (e) {
                        e.preventDefault();
                    }
                }
            }
        }
    }
0
Janna302

Als sinnvolle Ergänzung zu den anderen Antworten können Sie auch den Schwebestil der Legende deaktivieren:

legend: {
    itemStyle: {
        cursor: 'default',
    },
    itemHoverStyle: {
        color: '#333333',
    }
},

Siehe: https://jsfiddle.net/oyps4fj6/

0
marcovtwout

Hier ist ein JSFiddle , das zeigt, wie dies erreicht wird:

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