Biểu đồ phân tán

Tương quan

Nhiều X có thực sự làm thay đổi Y, hay bạn chỉ đang đuổi theo một sự trùng hợp? Vẽ các điểm của bạn ra, xu hướng, các cụm, cùng giá trị ngoại lai đều hiện chỉ trong nháy mắt, với kích thước bong bóng mang thêm một biến thứ ba miễn phí. Hệ số tương quan Pearson được trả về trong getContext(), nên bạn trích dẫn con số được luôn, khỏi cần nheo mắt nhìn đám mây điểm.

Example

canvas · responsive

Tìm hiểu thêm: Hướng dẫn Insights·Hướng dẫn DevTools

Biểu đồ ở trên là cùng một engine trên mọi framework - chỉ có mã tích hợp bên dưới là khác nhau.

Khi nào nên dùng

• Kiểm chứng một giả thuyết. Chi tiêu có kéo tỷ lệ chuyển đổi lên không? Thâm niên có ảnh hưởng đến tỷ lệ rời bỏ không? Nhìn vào đám mây điểm là thấy ngay xu hướng, cụm và điểm ngoại lai, còn getContext() đưa sẵn hệ số tương quan Pearson để bạn trích vào báo cáo.
• Tìm ra các phân khúc trước khi giá trị trung bình che mất chúng. Cụm điểm và điểm ngoại lai lộ rõ trên biểu đồ phân tán từ rất lâu trước khi chúng kịp xuất hiện trong bảng tổng hợp: đây là cái nhìn đầu tiên nhà phân tích dành cho mọi bộ dữ liệu mới.
• Nếu một trục là thời gian, hãy dùng biểu đồ đường: biểu đồ phân tán coi thời gian như một con số bình thường, làm mất trật tự đọc mà người xem mong đợi.

Dữ liệu lớn trên WebGPU Thử nghiệm

ScatterChart có renderer="webgpu" tùy chọn, vẽ đám mây điểm thành các vòng tròn do GPU dựng hàng loạt trong khi trục, nhãn và tooltip vẫn nằm trên lớp SVG. Tính năng này được kiểm soát theo khả năng phần cứng: trên trình duyệt không có WebGPU, nó tự động hạ cấp về canvas, và getContext().renderer báo cáo bộ dựng thực sự đã vẽ.

Demo bên dưới là một lời chào gửi tới vật lý hạt: 50.000 sự kiện dimuon mô phỏng trên nền continuum giảm dần. Những dải dọc sắc nét là các cộng hưởng J/ψ, ψ(2S) và Υ(1S/2S/3S), đúng cấu trúc mà một phổ dimuon ở LHC cho thấy, và chính là loại đám mây điểm mà bộ dựng GPU sinh ra để xử lý.

⚗️ Experimental - not yet stable. WebGPU rendering is an opt-in preview. It needs a WebGPU-capable browser (Chrome / Edge, or Safari 26+); everywhere else it falls back to canvas automatically. Axes, labels and tooltips stay on the SVG layer - only the data marks are painted on the GPU.

Heavy-data demo · 50.000 sự kiện dimuon mô phỏng… detecting

Xem dữ liệu chạy theo năm

Chiêu kinh điển kiểu Gapminder: gắn date cho từng điểm, bật timeline, rồi xem đám điểm dịch chuyển qua từng năm với nút play và thanh tua có sẵn. Mặc định tắt - không bật thì biểu đồ giữ nguyên.

Bấm nút play dưới biểu đồ: các điểm dịch chuyển qua từng năm. Kéo thanh tua để nhảy đến năm bất kỳ.

React

const ref = useRef<ScatterChartHandle>(null);

<ScatterChart ref={ref} {...props} timeline={{ speedMs: 1000, loop: true }} />;
// ref.current?.timeline() -> play() / pause() / seek(year) / stepForward()

Vue

<ScatterChart :options="{ ...props, timeline: { speedMs: 1000, loop: true } }" />

Svelte

<div use:scatterChart={{ ...props, timeline: { speedMs: 1000, loop: true } }}></div>

Angular

applyScatterChartProps(this.c.nativeElement, { ...props, timeline: { speedMs: 1000, loop: true } });

Web component

<michi-vz-scatter-chart id="c"></michi-vz-scatter-chart>
<script>
  const el = document.getElementById("c");
  el.timeline = { speedMs: 1000, loop: true };
  // el.getTimeline() -> play() / pause() / seek(year)
</script>

• speedMs chỉnh nhịp chạy, loop quay vòng, autoplay: true tự chạy khi mount, showControl: false ẩn thanh điều khiển có sẵn.
• Giá trị trượt mượt giữa các giai đoạn theo mặc định (interpolate); chỉnh chuyển động bằng tweenMs và easing, hoặc đặt interpolate: false để cắt thẳng. Khi bật reduced motion, biểu đồ luôn cắt thẳng.
• Controller headless luôn sẵn sàng: chart.timeline() cho play() / pause() / toggle() / seek(period) / stepForward() / stepBack(), kèm onStep và formatPeriod trong config khi cần tự dựng UI.
• Kết hợp với pointLabels để mỗi bong bóng luôn có tên khi di chuyển; filter vẫn áp dụng bên trong từng giai đoạn.
• Điểm không có date hiển thị ở mọi giai đoạn.

Cách dùng

React

import { ScatterChart } from "@michi-vz/react";

export default () => <ScatterChart {...props} />; // props = the chart options

Vue

<script setup>
import { ScatterChart } from "@michi-vz/vue";
</script>

<template>
  <ScatterChart :options="props" />
</template>

Svelte

<script>
  import { scatterChart } from "@michi-vz/svelte";
</script>

<div use:scatterChart={props}></div>

Angular

// main.ts - register the elements once
import "@michi-vz/angular";
import { applyScatterChartProps } from "@michi-vz/angular";

// component (uses CUSTOM_ELEMENTS_SCHEMA)
// template: <michi-vz-scatter-chart #c></michi-vz-scatter-chart>
applyScatterChartProps(this.c.nativeElement, props);

Web component

<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>

<michi-vz-scatter-chart id="c"></michi-vz-scatter-chart>
<script>
  Object.assign(document.getElementById("c"), props); // dataSet/series, title, …
</script>

Vanilla JS

import { mountScatterChart } from "@michi-vz/core";

const chart = mountScatterChart(el, props);
chart.update(next);
chart.getContext(); // renderer-agnostic, LLM-ready
chart.destroy();

API

Các prop được định kiểu là ScatterChartProps trong @michi-vz/core. Dùng chung cho mọi biểu đồ: width, height, margin, colors / colorsMapping, renderer ("svg", "canvas", hoặc "webgpu" thử nghiệm), highlightItems, disabledItems, và các callback on*. onChartDataProcessed / getContext() trả về ChartContext không phụ thuộc bộ dựng.