使用資料集
如果您的資料儲存在物件陣列中,您可以使用 dataset
輔助屬性。它接受物件陣列,例如 dataset={[{a: 1, b: 32, c: 873}, {a: 2, b: 41, c: 182}, ...]}
。
您可以在定義系列時重複使用此資料。散佈圖系列的運作方式與其他圖表略有不同。您需要指定 `datasetKeys` 屬性,它是一個物件,需要 `x`、`y` 和 `id` 鍵。如果需要,可以使用選用的 `z` 鍵。
互動
由於散佈圖元素可能很小,互動不一定需要精確地懸停在元素上方。當指標在繪圖區域中時,將使用最近的散佈圖元素進行互動(工具提示或醒目提示)。為此,圖表會計算 Voronoi Voronoi 圖,將指標位置對應到最近的元素。
您可以使用 `voronoiMaxRadius` 屬性定義最大半徑。如果與指標的距離大於此半徑,則不會選取任何項目。或者將 `disableVoronoi` 屬性設定為 `true`,以便僅在精確懸停在元素上方而不是 Voronoi Voronoi 區域時觸發互動。
最大半徑
若要將此功能與組合一起使用,請新增 `ChartsVoronoiHandler`。
<ChartsVoronoiHandler voronoiMaxRadius={50} />
點擊事件
散佈圖表提供 `onItemClick` 處理常式,用於處理特定散佈圖項目的點擊。它具有以下簽名。
const onItemClick = (
event, // The mouse event.
params, // An object that identifies the clicked elements.
) => {};
點擊圖表
// The data will appear here
如果 `disableVoronoi=true`,使用者需要精確點擊散佈圖元素,並且滑鼠事件將來自此元素。
否則,點擊行為將與 互動章節 中定義的相同,並且滑鼠事件將來自 svg 元件。
樣式
顏色比例
與其他圖表一樣,您可以直接或使用調色盤修改系列顏色。
您也可以使用軸 `colorMap` 修改顏色,它將值對應到顏色。散佈圖依優先順序使用
- z 軸顏色
- y 軸顏色
- x 軸顏色
- 系列顏色
在樣式文件中瞭解有關 `colorMap` 屬性的更多資訊。
<ScatterChart
/* ... */
series={[{ data: data.map(point => ({...point, z: point.x + point.y})) }]}
xAxis={[{
colorMap: {
type: 'piecewise',
thresholds: [-1.5, 0, 1.5],
colors: ['#d01c8b', '#f1b6da', '#b8e186', '#4dac26'],
}
}]}
yAxis={[{}]}
zAxis={[{}]}
/>
API
請參閱以下文件,以完整參考此處提及的元件可用的所有屬性和類別。