legendItemClick在highMaps中不起作用

Question

我现在使用highMaps有一段时间了，但目前我被卡住了。我有一个地图，其中每个区域根据图例中的类别进行着色(0-10为浅蓝色，10-20为蓝色，等等)单击图例上的类别的默认行为是隐藏地图中属于该类别的区域。我想禁用此默认行为。HighMaps提供了一个'legendItemClick‘方法来捕获此事件。但是，该事件未被捕获。如果我将其更改为“click”，它将被捕获。是我做错了什么，还是“legendItemClick”还不能在highMaps上工作？我希望有人能帮帮我。

$('#container').highcharts('Map', {
    legend: {
        title: {
            text: '',
            style: {
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
            }
        },
        align: 'left',
        verticalAlign: 'top',
        floating: true,
        layout: 'vertical',
        borderRadius: 10,
        valueDecimals: 0,
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
        y: 60,
        x: -5

    },

    colorAxis: {
        min:0,
        type: 'linear',
        max: 100,
        labels: {
            x: 10,
            y: 10
        },
        dataClasses: [{
            from: 0,
            to: 0.1,
            name: '0'
        }, {
            from: 0.1,
            to: 1,
            name: '0.1 - 1'
        }, {
            from: 1,
            to: 5,
        }, {
            from: 5,
            to: 10,
        },{
            from: 10,
            to: 20,
        },{
            from: 20,
            to: 25,
        }, {
            from: 25,
            to: 50,
        }, {
            from: 50,
            to: 75
        }, {
            from: 75,
            to: 90
        }, {
            from: 90,
            to: 100
        }]          
    },

    plotOptions: {
        series: {
            events: {
                legendItemClick: function (e) {
                    return false;
                }
            }
        }
    },

    series : [{
        data : data,
        mapData: Highcharts.maps['countries/nl/nl-all-all'],
        joinBy: 'hc-key',
        states: {
            hover: {
                color: '#c00'
            }
        },
        dataLabels: {
            enabled: false,
            format: '{point.name}'
        }
    }]
});

Answer 1

您需要添加一个单独的侦听器来处理图例上的单击。

  // Disable click on legends
  legendListener(): void {
    ((H): any => {
      H.wrap(H.Legend.prototype, 'renderItem', function(proceed, item, ...args) {
        const legendItem = item.legendItem;
        const ret = proceed.apply(this, [item, ...args]);
        if (item.isDataClass && !legendItem && item.legendItem && item.events) {
          H.objectEach(item.events, (value, key) => {
            H.addEvent(item, key, value);
          });
        }
        return ret;
      });
    })(Highcharts);
  }

其中图表选项具有以下内容：

colorAxis: {
    events: {
      legendItemClick: (): any => false,
    },
    dataClasses: [{
      from: 0,
      to: 5,
      color: '#AFE1FF',
      events: {
        legendItemClick: (): any => false,
      },
    },
    }],
  },