michi-vz

Tiếng Việt

English
Français
Nederlands

Tiếng Việt

English
Français
Nederlands

Giao diện

Biểu đồ khoảng cách ​

So sánh

Hai con số quan trọng cách nhau bao xa? Vẽ trước và sau, mục tiêu và thực tế, nam và nữ, và thanh nối giữa chúng chính là câu chuyện - khoảng cách càng rộng, nó càng nói lên nhiều điều.

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 trong 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 ​

  • Mục tiêu và thực tế, trước và sau, dự báo và kết quả. Mỗi hàng hai giá trị, và khoảng cách giữa chúng mới là điều đáng nói: bản thân thanh khoảng cách chính là kết luận.
  • Xếp hạng theo mức chênh. Chỉ cần sắp xếp các hàng là những cú về đích ấn tượng nhất (hay những cú hụt sâu nhất) nổi lên ngay: sinh ra cho buổi họp sáng thứ Hai điểm lại ai đã thu hẹp được khoảng cách.
  • Nếu độ lớn tuyệt đối quan trọng hơn phần chênh lệch, hai cột con nằm cạnh nhau trong biểu đồ cột so sánh giúp đọc cả hai đại lượng dễ hơn.

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

GapChart có tùy chọn renderer="webgpu" để vẽ các marker value1/value2 và các thanh nối dưới dạng hình theo instance trên GPU trong khi trục, nhãn và tooltip vẫn ở lớp SVG. Tính năng này được kiểm soát theo khả năng: trên trình duyệt không có WebGPU, nó sẽ tự động hạ cấp xuống canvas, và getContext().renderer báo cáo bất kỳ renderer nào thực sự đã vẽ.

⚗️ 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 · ~195 quốc gia… detecting

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

Gắn date cho từng dòng rồi bật timeline: biểu đồ thành câu chuyện theo từng năm với nút play và thanh tua riêng, mỗi lần hiển thị một giai đoạ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 đồ: dữ liệu chạy qua từng năm, mỗi lần một snapshot. Kéo thanh tua để nhảy đến năm bất kỳ.

tsx
const ref = useRef<GapChartHandle>(null);

<GapChart ref={ref} {...props} timeline={{ speedMs: 1000, loop: true }} />;
// ref.current?.timeline() -> play() / pause() / seek(year) / stepForward()
vue
<GapChart :options="{ ...props, timeline: { speedMs: 1000, loop: true } }" />
svelte
<div use:gapChart={{ ...props, timeline: { speedMs: 1000, loop: true } }}></div>
ts
applyGapChartProps(this.c.nativeElement, { ...props, timeline: { speedMs: 1000, loop: true } });
html
<michi-vz-gap-chart id="c"></michi-vz-gap-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.
  • filter (top-N, sắp xếp) vẫn áp dụng bên trong từng giai đoạn, nên "top 5 mỗi năm" chạy được ngay.
  • Dòng không có date hiển thị ở mọi giai đoạn.

Cách dùng ​

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

export default () => <GapChart {...props} />; // props = the chart options
vue
<script setup>
import { GapChart } from "@michi-vz/vue";
</script>

<template>
  <GapChart :options="props" />
</template>
svelte
<script>
  import { gapChart } from "@michi-vz/svelte";
</script>

<div use:gapChart={props}></div>
ts
// main.ts - register the elements once
import "@michi-vz/angular";
import { applyGapChartProps } from "@michi-vz/angular";

// component (uses CUSTOM_ELEMENTS_SCHEMA)
// template: <michi-vz-gap-chart #c></michi-vz-gap-chart>
applyGapChartProps(this.c.nativeElement, props);
html
<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>

<michi-vz-gap-chart id="c"></michi-vz-gap-chart>
<script>
  Object.assign(document.getElementById("c"), props); // dataSet/series, title, …
</script>
ts
import { mountGapChart } from "@michi-vz/core";

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

API ​

Các prop được định kiểu là GapChartProps 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 độc lập với renderer.