Preview Updated 2026-05-10

Scatter plot

Two-dimensional scatter chart, colored by group.

Basic usage

Data is passed via props and rendered as pure SVG, with no third-party charting dependency. Colors are drawn from the --viz-1..8 tokens and are colorblind-friendly.

背景

src/App.vue

<script setup lang="ts">
import { CfScatterPlot } from '@chufix-design/vue';
const data = Array.from({ length: 60 }, (_, i) => ({
  x: Math.random() * 100,
  y: Math.random() * 100,
  group: i % 4 === 0 ? 'a' : i % 4 === 1 ? 'b' : i % 4 === 2 ? 'c' : 'd',
}));
</script>
<template>
  <CfScatterPlot :data="data" />
</template>

<script setup>
import { CfScatterPlot } from '@chufix-design/vue';
const data = Array.from({ length: 60 }, (_, i) => ({
  x: Math.random() * 100,
  y: Math.random() * 100,
  group: i % 4 === 0 ? 'a' : i % 4 === 1 ? 'b' : i % 4 === 2 ? 'c' : 'd',
}));
</script>
<template>
  <CfScatterPlot :data="data" />
</template>

import { CfScatterPlot } from '@chufix-design/react';

export default function Demo() {
  const data = Array.from({ length: 60 }, (_, i) => ({
    x: Math.random() * 100,
    y: Math.random() * 100,
    group: i % 4 === 0 ? 'a' : i % 4 === 1 ? 'b' : i % 4 === 2 ? 'c' : 'd',
  }));
  return (
    <>
      <CfScatterPlot data={data} />
    </>
  );
}

import { CfScatterPlot } from '@chufix-design/react';

export default function Demo() {
  const data = Array.from({ length: 60 }, (_, i) => ({
    x: Math.random() * 100,
    y: Math.random() * 100,
    group: i % 4 === 0 ? 'a' : i % 4 === 1 ? 'b' : i % 4 === 2 ? 'c' : 'd',
  }));
  return (
    <>
      <CfScatterPlot data={data} />
    </>
  );
}

Multi-group clustering

A point’s group field decides its color; if omitted, it falls into default.

背景

src/App.vue

<script setup lang="ts">
import { CfScatterPlot } from '@chufix-design/vue';
function gen(n: number, group: string, cx: number, cy: number, spread = 20) {
  return Array.from({ length: n }, () => ({
    x: cx + (Math.random() - 0.5) * spread,
    y: cy + (Math.random() - 0.5) * spread,
    group,
  }));
}
const data = [
  ...gen(30, 'cluster-a', 30, 30),
  ...gen(30, 'cluster-b', 70, 60),
  ...gen(30, 'cluster-c', 50, 85),
  ...gen(20, 'outliers', 80, 20, 40),
];
</script>
<template>
  <CfScatterPlot :data="data" />
</template>

<script setup>
import { CfScatterPlot } from '@chufix-design/vue';
function gen(n, group, cx, cy, spread = 20) {
  return Array.from({ length: n }, () => ({
    x: cx + (Math.random() - 0.5) * spread,
    y: cy + (Math.random() - 0.5) * spread,
    group,
  }));
}
const data = [
  ...gen(30, 'cluster-a', 30, 30),
  ...gen(30, 'cluster-b', 70, 60),
  ...gen(30, 'cluster-c', 50, 85),
  ...gen(20, 'outliers', 80, 20, 40),
];
</script>
<template>
  <CfScatterPlot :data="data" />
</template>

import { CfScatterPlot } from '@chufix-design/react';

export default function Demo() {
  const data = [
    ...gen(30, 'cluster-a', 30, 30),
    ...gen(30, 'cluster-b', 70, 60),
    ...gen(30, 'cluster-c', 50, 85),
    ...gen(20, 'outliers', 80, 20, 40),
  ];
  return (
    <>
      <CfScatterPlot data={points} />
    </>
  );
}

import { CfScatterPlot } from '@chufix-design/react';

export default function Demo() {
  const data = [
    ...gen(30, 'cluster-a', 30, 30),
    ...gen(30, 'cluster-b', 70, 60),
    ...gen(30, 'cluster-c', 50, 85),
    ...gen(20, 'outliers', 80, 20, 40),
  ];
  return (
    <>
      <CfScatterPlot data={points} />
    </>
  );
}

API

Prop	Type	Default	Description
`data`	`ScatterPoint[]`	`—`	{ x, y, r?, group? }[]
`width / height`	`number`	`480 / 240`