2

我现在正在使用 highMaps 一段时间，但目前我被卡住了。我有一张地图，其中每个区域都根据图例中的类别进行着色（0-10 是浅蓝色，10-20 是蓝色等）。单击图例上的类别的默认行为是区域，属于到那个类别，在地图上都是隐藏的。我想禁用此默认行为。HighMaps 提供了一个方法 'legendItemClick' 来捕获这个事件。但是，该事件没有被捕获。如果我将其更改为“点击”，它将被捕获。我做错了什么还是'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}'
        }
    }]
});
4

1 回答 1

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,
      },
    },
    }],
  },
于 2020-09-18T14:02:24.183 回答