图表 - 散点图

散点图通过在表面上使用点来表达两个变量之间的关系。

基础

散点图系列应包含一个 data 属性，其中包含对象数组。这些对象需要 x、y 和 id 属性。

使用数据集

如果您的数据存储在对象数组中，则可以使用 dataset 辅助属性。它接受一个对象数组，例如 dataset={[{a: 1, b: 32, c: 873}, {a: 2, b: 41, c: 182}, ...]}。

在定义系列时，您可以重用此数据。散点图系列的工作方式与其他图表略有不同。您需要指定 datasetKeys 属性，该属性是一个对象，需要 x、y 和 id 键。如果需要，还可以使用可选的 z 键。

交互

由于散点元素可能很小，因此交互不需要精确悬停在元素上方。当指针位于绘图区域内时，最近的散点元素将用于交互（工具提示或高亮）。为此，图表计算 Voronoi 图，将指针位置映射到最近的元素。

您可以使用 voronoiMaxRadius 属性定义最大半径。如果与指针的距离大于此半径，则不会选择任何项目。或者将 disableVoronoi 属性设置为 true，以仅在精确悬停在元素上方而不是 Voronoi 单元格上方时触发交互。

要将此功能与组合一起使用，请添加 ChartsVoronoiHandler。

<ChartsVoronoiHandler voronoiMaxRadius={50} />

点击事件

散点图提供 onItemClick 处理程序，用于处理对特定散点项目的点击。它具有以下签名。

const onItemClick = (
  event, // The mouse event.
  params, // An object that identifies the clicked elements.
) => {};

如果 disableVoronoi=true，用户需要精确点击散点元素，并且鼠标事件将来自此元素。

否则，点击行为将与交互部分中定义的相同，并且鼠标事件将来自 svg 组件。

样式

颜色比例

与其他图表一样，您可以直接或使用调色板修改系列颜色。

您还可以使用轴 colorMap 修改颜色，该轴将值映射到颜色。散点图按优先级使用

1. z 轴颜色
2. y 轴颜色
3. x 轴颜色
4. 系列颜色

了解有关样式文档中 colorMap 属性的更多信息。

网格

您可以使用 grid 属性在图表的背景中添加网格。

有关更多信息，请参阅轴—网格文档。

CSS 🚧

形状 🚧

尺寸 🚧

API

请参阅下面的文档，以获取此处提及的组件的所有可用属性和类的完整参考。

• <ChartsGrid />
• <ChartsVoronoiHandler />
• <ScatterChart />
• <ScatterChartPro />
• <ScatterPlot />