legendHighlight

开始使用

legendHighlight 交互的对象是图表组件 legend 。

触发：鼠标悬停在图例项。
结束：鼠标离开图例项。
影响状态：

框选范围的元素变为 active 状态。

框选范围以外的元素变为 inactive 状态。

交互内置状态：

({
  // 定义 inactive 状态下的元素透明度为0.5

  state: { inactive: { opacity: 0.5 } },
});

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
    "legend": {
      "color": {
        "state": {
          "inactive": {
            "labelOpacity": 0.5,
            "markerOpacity": 0.5
          }
        }
      }
    },
    "yField": ['end', 'start'],
    "xField": "month",
    "axis": {
      "y": {
        "labelFormatter": "~s"
      }
    },
    "data": profit,
    "interaction": {
      "legendHighlight": true
    }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);

使用方式

传入 boolean 设置是否开启交互。

({

  interaction: { legendHighlight: true }, // 采用默认配置
});

配置层级

图例高亮交互可以配置在 View 层级：

{
  "interaction": {
    "legendHighlight": true
  }
}

配置项

当前版本的 LegendHighlgiht 交互无可配置参数。

需要设置 state 的 inactive 状态，可以参照元素状态 state

legend 组件配置

具体文档看图例 legend

事件

获得数据

legend:highlight - 当鼠标悬停在图例项上触发
legend:unhighlight - 当鼠标离开图例时触发

chart.on('legend:highlight', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  console.log(data);
});
chart.on('legend:highlight', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  console.log(data);
});

chart.on('legend:unhighlight', (e) => {
  const { nativeEvent } = e;
  if (!nativeEvent) return;
  console.log('unhighlight');
});
chart.on('legend:unhighlight', (e) => {
  const { nativeEvent } = e;
  if (!nativeEvent) return;
  console.log('unhighlight');
});
chart.on('legend:highlight', (e) => {
  const { nativeEvent, data } = e;
  if (!nativeEvent) return;
  console.log(data);
});

chart.on('legend:unhighlight', (e) => {
  const { nativeEvent } = e;
  if (!nativeEvent) return;
  console.log('unhighlight');
});

触发交互

legend:highlight - 高亮对应于图例值的数据
legend:unhighlight - 取消高亮状态

chart.emit('legend:highlight', {
  data: { channel: 'color', value: 'Increase' },
});
chart.emit('legend:unhighlight', {});

示例

下面的示例展示了一个legendHighlight的基本交互功能。

import { Column } from '@ant-design/plots';
import React from 'react';
import { createRoot } from 'react-dom';

const Demo = () => {

  const config ={
      autoFit: true,
      height: 300,
      data: [
        { name: 'London', month: 'Jan.', value: 18.9 },
        { name: 'London', month: 'Feb.', value: 28.8 },
        { name: 'London', month: 'Mar.', value: 39.3 },
        { name: 'London', month: 'Apr.', value: 81.4 },
        { name: 'London', month: 'May', value: 47 },
        { name: 'London', month: 'Jun.', value: 20.3 },
        { name: 'London', month: 'Jul.', value: 24 },
        { name: 'London', month: 'Aug.', value: 35.6 },
        { name: 'Berlin', month: 'Jan.', value: 12.4 },
        { name: 'Berlin', month: 'Feb.', value: 23.2 },
        { name: 'Berlin', month: 'Mar.', value: 34.5 },
        { name: 'Berlin', month: 'Apr.', value: 99.7 },
        { name: 'Berlin', month: 'May', value: 52.6 },
        { name: 'Berlin', month: 'Jun.', value: 35.5 },
        { name: 'Berlin', month: 'Jul.', value: 37.4 },
        { name: 'Berlin', month: 'Aug.', value: 42.4 },
      ],
      xField: 'month',
      yField: 'value',
      colorField: 'name',
      transform: [
        {
          type: 'dodgeX',
          groupBy: 'x',
          orderBy: 'value',
          padding: 0.1,
        },
      ],
      interaction: {
        legendHighlight: {
          series: true,
        },
      },
      state: { inactive: { opacity: 0.5 } }
  };

  return <Column {...config} />;
};

createRoot(document.getElementById('container')).render(<Demo />);