图表 - 高亮

高亮显示数据可以为图表用户提供快速的视觉反馈。

它可以用来强调特定的数据点或系列，或淡化图表的其余部分。它可以由用户控制，也可以在多个图表之间同步。

高亮

高亮坐标轴

您可以根据鼠标位置高亮显示数据。默认情况下，这些高亮显示是线条，但如果您的 x 轴使用 scaleType: 'band'，则也可以是垂直带。

在图表上，要自定义此行为，您可以使用

axisHighlight={{
  x: 'line', // Or 'none', or 'band'
  y: 'line', // Or 'none'
}}

高亮系列

与工具提示并行，您可以高亮显示和淡化元素。

这种交互由系列属性 highlightScope 控制，它包含两个选项

• highlighted 指示要高亮显示的项目。它的值可以是
  • 'none' 不执行任何操作（默认值）。
  • 'item' 仅高亮显示项目本身。
  • 'series' 高亮显示系列的所有项目。
• faded 指示要淡化的项目（如果它们尚未高亮显示）。它的值可以是
  • 'none' 不执行任何操作（默认值）。
  • 'series' 淡化系列的所有项目。
  • 'global' 淡化图表的所有项目。

受控高亮

当用户设置 highlightedItem 和 onHighlightChange 时，可以由用户控制高亮显示。

您可以根据输入设置 highlightedItem 值，并在用户将鼠标悬停在项目本身上时同步它。

同步高亮

拥有受控的高亮显示允许您同时在多个图表中控制它。您需要确保 series 具有相同的 ids 并且数据顺序相同。

API

请参阅下面的文档，了解此处提到的组件的所有可用属性和类的完整参考。

• <ChartsAxisHighlight />