Highcharts：如何縮小圖例項 hover 上的氣泡半徑？

Question

我想完成的事情：

我試圖在圖例中表示氣泡大小（z 值）。 當該圖例項懸停或關閉時，氣泡應縮小到相同的大小，就像正常的散點圖 plot 一樣。

到目前為止我已經嘗試過：

通過添加一個沒有數據的新系列，我能夠獲得一個代表大小的圖例項目。 我將有數據的 2 個系列鏈接到這個新系列。 然后我覆蓋了 Highcharts 圖例 hover function 以便當“大小”圖例項懸停時，鏈接的系列保持完全可見。

像這樣：

series: [
  {
    type: "bubble",
    name: HotSpotResources.Positive,
    color: "#2699FB",
    data: points[0], //example data like -> {x: 10, y: 12, z: 150, id: "some_id"}
    linkedTo: "nsize",
    showInLegend: true
  },
  {
    type: "bubble",
    name: HotSpotResources.Negative,
    color: "#F8A6A6",
    data: points[1],
    linkedTo: "nsize",
    showInLegend: true
  },
  {
    id: "nsize",
    type: "bubble",
    name: HotSpotsResources.nSize,
    color: "#4A4A4A",
    marker: {
      symbol: `url(${LayoutResources.AppRoot}/assets/images/nsize-icon.svg)`
    },
  }
],

和圖例 hover 覆蓋：

(function (H) {
  H.Legend.prototype.setItemEvents = function (item, legendItem, useHTML) {
    const legend = this,
      boxWrapper = legend.chart.renderer.boxWrapper,
      activeClass = 'highcharts-legend-' + (item.series ? 'point' : 'series') + '-active',
      hasLinkedSeries = item.linkedSeries && item.linkedSeries.length ? true : false,
      setLinkedSeriesState = (item, state) => {
        item.linkedSeries.forEach((elem) => (elem.setState(state)));
      };

      // Set the events on the item group, or in case of useHTML, the item itself (#1249)
      (useHTML ? legendItem : item.legendGroup).on('mouseover', () => {
        if (item.visible) {
          item.setState('hover');
          // Add hover state to linked series
          if (hasLinkedSeries) {
            setLinkedSeriesState(item, 'hover');
          }
          // A CSS class to dim or hide other than the hovered series
          boxWrapper.addClass(activeClass);

          legendItem.css(legend.options.itemHoverStyle);
        }
      }).on('mouseout', () => {
        legendItem.css(H.merge(item.visible ? legend.itemStyle : legend.itemHiddenStyle));

        // A CSS class to dim or hide other than the hovered series
        boxWrapper.removeClass(activeClass);

        item.setState();
      }).on('click',(event) => {
        const strLegendItemClick = 'legendItemClick',
          fnLegendItemClick = () => {
            item.setVisible ? item.setVisible() : "";
          };

        // Pass over the click/touch event. #4.
        event = {
          browserEvent: event
        };

        // click the name or symbol
        if (item.firePointEvent) { // point
          item.firePointEvent(strLegendItemClick, event, fnLegendItemClick);
        } 
        else {
          H.fireEvent(item, strLegendItemClick, event, fnLegendItemClick);
        }
    });
  };
})(Highcharts)

到目前為止，一切都很好。

我嘗試只用 css 縮小尺寸，但作為 svg 這是不可能的/它產生了不良結果。 縮放它們也改變了它們的 position 所以這是不可能的。

.highcharts-series-hover {
  transform: scale(1.5);
  transition: transform 250ms;
}

通過更改標記 state，我能夠縮小 hover 上的氣泡（氣泡本身不是圖例項）：

plotOptions: {
  bubble: {
    marker: {
      states: {
        hover: {
          radius: 4
        }
      }
    }
  }
}

但我希望在懸停尺寸圖例項時獲得相同的結果，而不是在懸停氣泡時。

最后，這是我創建的圖表的屏幕截圖，以供參考：

誰能找到一種方法來操縱 Highcharts 來完成這項任務或幫助我指出正確的方向？

Answer 1

您可以在renderItem方法的包裝中添加onmouseover和onmouseout事件，並將取消懸停的系列的類型更改為scatter 。

(function(H) {
  H.wrap(H.Legend.prototype, 'renderItem', function(proceed, item) {
    proceed.call(this, item);

    var chart = this.chart,
      series = chart.series,
      element = item.legendGroup.element;

    element.onmouseover = function() {
      series.forEach(function(s) {
        if (s !== item) {
          s.update({
            type: 'scatter'
          }, false);
        }
      });

      chart.redraw();
    }
    element.onmouseout = function() {
      series.forEach(function(s) {
        if (s !== item) {
          s.update({
            type: 'bubble'
          }, false);
        }
      });

      chart.redraw();
    }
  });
}(Highcharts));

---

現場演示： https://jsfiddle.net/BlackLabel/r64f3w5n/

API 參考： https://api.highcharts.com/class-reference/Highcharts.Series#update

文檔： https://www.highcharts.com/docs/extending-highcharts/extending-highcharts