PlScatterChart

점 하나에 숫자 둘, 그리고 그 둘이 함께 움직이는지입니다. 두 축이 모두 값을 재기 때문에, 라이브러리에서 category가 없는 유일한 차트입니다.

React

import { PlScatterChart } from 'plass-ui';

<PlScatterChart series={stores} />;

import 'package:plass_ui/plass_ui.dart';

PlScatterChart(series: stores);

점이 속한 열도 없고, 점들을 흐트러뜨릴 순서도 없습니다. z가 있는 점은 버블로, 없는 점은 dot으로 그려지므로 산점도와 버블 차트는 같은 데이터를 읽는 같은 컴포넌트입니다. 세 번째 숫자가 있느냐 없느냐일 뿐입니다.

Props

Prop	타입	기본값	설명
series *	readonly PlassChartSeries[]	—	데이터. 점마다 숫자나 날짜인 x가 필요합니다
categories	readonly PlassChartCategory[]	—	점이 자기 x를 지니지 않을 때 대신 놓이는 값
shape	'auto' | 'varied' | 'circle' | 'square' | 'triangle' | 'diamond' | 'cross'	'auto'	점을 무엇으로 그릴지. auto는 네 번째 series부터 모양을 나눕니다 — 색이 셋까지만 구별되기 때문입니다
pointRadius	number	—	z가 없는 점의 반지름. 기본값은 size 사다리
maxRadius	number	—	가장 큰 버블의 반지름이자 plot 둘레에 비워 두는 여백. 기본값은 높이의 1/12
xAxis	PlassChartAxis	—	여기서는 값을 재는 x 축
yAxis	PlassChartAxis	—	값 축
legend	PlassChartLegend	—	범례
tooltip	PlassChartTooltip	—	툴팁
height	number | string	—	plot의 높이
format	Intl.NumberFormatOptions	—	값을 쓰는 방식
label	string	'Chart'	그림 전체의 접근성 이름
empty	ReactNode	—	그릴 것이 없을 때 그리는 것
size공통	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	타입 스케일, plot 높이, 기본 점 반지름

Prop	타입	기본값	설명
series *	List<PlassChartSeries>	—	데이터. 점마다 숫자나 날짜인 x가 필요합니다
categories	List<PlassChartCategory>?	—	점이 자기 x를 지니지 않을 때 대신 놓이는 값
shape	PlScatterShape	PlScatterShape.auto	점을 무엇으로 그릴지. React의 MarkShape | 'varied' | 'auto' 대신 일곱 값짜리 enum입니다
pointRadius	double?	—	z가 없는 점의 반지름. 기본값은 size 사다리
maxRadius	double?	—	가장 큰 버블의 반지름이자 plot 둘레에 비워 두는 여백. 기본값은 높이의 1/12
xAxis	PlChartAxis	PlChartAxis()	여기서는 값을 재는 x 축
yAxis	PlChartAxis	PlChartAxis()	값 축
legend	PlChartLegend	PlChartLegend()	범례
tooltip	PlChartTooltip	PlChartTooltip()	툴팁
height	double?	—	plot의 높이
format	String Function(double)?	—	값을 쓰는 방식
semanticLabel	String?	'Chart'	그림 전체의 접근성 이름
empty	Widget?	—	그릴 것이 없을 때 그리는 것
size공통	PlassSize	PlassSize.md	타입 스케일, plot 높이, 기본 점 반지름

각 점의 x는 숫자나 날짜여야 합니다. 글자는 수직선 위에 놓일 자리가 없고, 이름 붙은 것들을 한 척도에 대고 재는 차트는 막대 차트입니다.

어느 축도 0으로 끌려가지 않습니다. 위치가 담는 것은 자리이므로, 축을 잘라도 모든 점이 같은 만큼 밀릴 뿐 구름의 모양은 살아남습니다. 길이가 곧 값인 막대에서는 그렇지 않습니다.

라이브러리 전체에서 공유 축이 뜻하는 바는 prop 규약에 있습니다.

Examples

버블

React

import { PlScatterChart } from 'plass-ui';

const markets = [
  {
    name: 'Europe',
    data: [
      { x: 8.2, y: 62, z: 84 },
      { x: 11.4, y: 71, z: 47 },
      { x: 6.9, y: 55, z: 120 }
    ]
  },
  {
    name: 'Asia',
    data: [
      { x: 14.1, y: 48, z: 260 },
      { x: 9.6, y: 66, z: 31 },
      { x: 12.8, y: 59, z: 175 }
    ]
  }
];

export default function ScatterChartBubbles() {
  return (
    <PlScatterChart
      className="w-full"
      series={markets}
      label="Growth against margin"
      xAxis={{ label: 'Growth (%)' }}
      yAxis={{ label: 'Margin (%)' }}
    />
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

PlassChartDatum _at(double x, double y, double z) =>
    PlassChartDatum.point(PlassChartPoint(x: PlassChartCategory.number(x), y: y, z: z));

final List<PlassChartSeries> _markets = <PlassChartSeries>[
  PlassChartSeries(
    name: 'Europe',
    data: <PlassChartDatum>[_at(8.2, 62, 84), _at(11.4, 71, 47), _at(6.9, 55, 120)],
  ),
  PlassChartSeries(
    name: 'Asia',
    data: <PlassChartDatum>[_at(14.1, 48, 260), _at(9.6, 66, 31), _at(12.8, 59, 175)],
  ),
];

class ScatterChartBubbles extends StatelessWidget {
  const ScatterChartBubbles({super.key});

  @override
  Widget build(BuildContext context) {
    return PlScatterChart(
      series: _markets,
      semanticLabel: 'Growth against margin',
      xAxis: const PlChartAxis(label: 'Growth (%)'),
      yAxis: const PlChartAxis(label: 'Margin (%)'),
    );
  }
}

점의 z는 반지름이 아니라 넓이입니다. 반지름으로 담으면 두 배인 값이 네 배 크기로 그려지는데, 제곱근이 화면에 칠해진 잉크를 그 뒤의 숫자에 비례하게 만듭니다. 척도는 차트 전체에 하나이고 숨긴 series까지 포함해서 잽니다. 그래서 같은 크기의 두 버블은 어디에 있든 같은 숫자를 뜻하고, series를 꺼도 나머지 크기가 바뀌지 않습니다.

버블은 큰 것부터 그립니다. 큰 버블이 위에 얹히면 그 안의 작은 버블은 보이지 않고, 흔한 해결책인 모든 fill을 반투명으로 만들기는 팔레트가 어렵게 확보한 대비를 되돌립니다.

shape

React

import { PlScatterChart } from 'plass-ui';

const runs = [1, 2, 3, 4, 5].map((n) => ({
  name: `Run ${n}`,
  data: [
    { x: n * 4, y: 20 + n * 6 },
    { x: n * 4 + 9, y: 34 + n * 4 },
    { x: n * 4 + 17, y: 26 + n * 7 }
  ]
}));

export default function ScatterChartShape() {
  return <PlScatterChart className="w-full" series={runs} label="Five runs" shape="varied" />;
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

PlassChartDatum _at(double x, double y) =>
    PlassChartDatum.point(PlassChartPoint(x: PlassChartCategory.number(x), y: y));

final List<PlassChartSeries> _runs = <PlassChartSeries>[
  for (int n = 1; n <= 5; n += 1)
    PlassChartSeries(
      name: 'Run $n',
      data: <PlassChartDatum>[
        _at(n * 4, 20 + n * 6),
        _at(n * 4 + 9, 34 + n * 4),
        _at(n * 4 + 17, 26 + n * 7),
      ],
    ),
];

class ScatterChartShape extends StatelessWidget {
  const ScatterChartShape({super.key});

  @override
  Widget build(BuildContext context) {
    return PlScatterChart(series: _runs, semanticLabel: 'Five runs', shape: PlScatterShape.varied);
  }
}

기본값 auto는 색만으로 정체를 나를 수 있는 동안 원을 그리고, 네 번째 series부터 series마다 다른 모양으로 바꿉니다. 이 경계는 고른 것이 아니라 잰 것입니다. 팔레트의 앞 세 자리를 쓰면 deuteranopia에서 가장 가까운 쌍이 밝은 바탕에서 ΔE 64, 어두운 바탕에서 51입니다. 네 번째를 더하면 각각 4.9와 2.8로 떨어집니다. 셋을 넘으면 색은 아무 말도 하지 않고, dot에 남아 있는 통로는 모양뿐입니다.

color를 직접 준 series는 이 한도에 세지 않습니다. 한도가 던지는 질문에 caller가 이미 답했기 때문입니다.

varied는 조건 없이 모양을 켭니다. 차트를 인쇄하거나 흑백으로 읽을 때 쓰세요. 다섯 모양 중 하나를 지정하면 모든 점이 그 모양이 되며, series가 넷 이상일 때 이는 두 번째 통로를 포기하는 선택입니다.

pointRadius와 maxRadius

pointRadius는 z가 없는 점의 반지름입니다. maxRadius는 가장 큰 버블이 커질 수 있는 한계이자 plot 주위에 비워 두는 여백입니다. 점은 중심에서부터 그려지므로, 그러지 않으면 가장 큰 x의 버블이 가장자리 밖으로 걸칩니다.

Accessibility

• 그림은 차트의 이름을 지니고, 모든 점을 글로 넘깁니다. series마다 x, y 쌍이 나열되고 z가 있으면 괄호 안에 붙습니다.
• React에서 그림은 role="img"이자 tab 정거장이고, 화살표 키가 데이터를 준 순서대로 점을 옮겨 다닙니다. 그리는 순서인 큰 것부터는 읽는 사람이 예상할 수 없는 순서입니다.
• React에서는 같은 숫자가 차트 아래 표에도 적힙니다. 다른 차트가 쓰는 격자가 아니라 점마다 한 행입니다. 둘 다 자기 series의 다섯 번째인 두 점은 서로 아무 관계가 없고, 한 행에 묶으면 없는 관계를 만들어 내기 때문입니다. 열 이름은 축 label에서 따오고, 없으면 x, y, z입니다.
• series가 셋을 넘으면 점은 색뿐 아니라 모양으로도 갈리고, legend의 swatch가 그 모양을 보여 줍니다.