AntV는 데이터 시각화를 위한 기술 브랜드입니다.
여기에는 통계 차트, 그래프 시각화, 지리 공간 시각화, 자동 차트 추천 및 생성 등 다양한 분야의 시각화 요구를 지원하는 여러 개의 오픈 소스 JavaScript 라이브러리가 포함되어 있습니다.
https://observablehq.com/@jiazhewang/introduction-to-antv
Ant Financial Services Group 및 Alibaba Group의 거대한 데이터 비즈니스에서 테스트 한 결과 다양한 데이터 분석 시나리오를 보장 할 수 있습니다.
이 노트북은 다양한 측면에서 AntV의 기능을 소개하고 관련 데모를 보여줍니다.
AntV의 최신 업데이트를 따르려면 : ✩ GitHub에 관심있는 repos에 별표를 표시하십시오.
통계 차트
AntV는 G2, G2Plot, F2 및 AVA라는 라이브러리가 있는 기본 통계 차트를 지원합니다. 혼란스러워? 걱정 마세요! 빨리 걸을 수 있습니다.
G2-? 통계 차트의 시각화 문법
G2는 그래픽 문법을 구현하는 JavaScript 라이브러리입니다 (예, "G2"라는 이름의 원점입니다).
이 문법은 색상, 모양 또는 길이와 같은 시각적 변수와 데이터를 매핑하여 그래픽을 사양으로 나눕니다.
다음은 매우 간단한 데모입니다. G2의 막대 차트.
G2Demo1 = {
// for Observable Cell
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div></div>`
wrapper.appendChild(container);
yield wrapper;
// Demo Code
const data = [
{ genre: 'Sports', sold: 275 },
{ genre: 'Strategy', sold: 115 },
{ genre: 'Action', sold: 120 },
{ genre: 'Shooter', sold: 350 },
{ genre: 'Other', sold: 150 },
];
// Step 1: declare Chart instance
const chart = new G2.Chart({
container, // specify DOM element
width: 600,
height: 300,
});
// Step 2: load data
chart.data(data);
// Step 3: grammar of graphics
chart.interval().position('genre*sold');
// Step 4: render
chart.render();
}
주요 부분은 3 단계임을 알 수 있습니다. 체인 구문에서 문법으로 차트를 정의합니다. 이 구문을 유연하게 사용하면 셀 수없이 많은 유형의 그래픽을 정의 할 수 있습니다.
예를 들어 다음은 고급 구현입니다.
G2에 대한 자세한 내용을 보려면 웹 사이트를 방문하여 더 많은 데모를 보거나 GitHub 저장소에 별표를 표시하십시오.
그러나 시각화 전문가가 아닌 경우 문법을 시작하기가 매우 어려워 보입니다. 따라서 더 넓은 사용자를 위한 "계획 B"가 있습니다.
G2Plot-G G2 기반의 구성 가능한 라이브러리
초보자는 문법을 잊어 버리고 구성 (또는 옵션)이 더 친숙합니다.
G2Plot을 사용하면
이 예를 살펴보십시오 : 기본 장미 차트.
G2PlotDemo = {
// for Observable Cell
const wrapper = html`<div style="text-align: center;"></div>`;
const container = html`<div style="height: 600px;"></div>`
wrapper.appendChild(container);
yield wrapper;
// Demo Code
const data = [
{ type: 'Apple', value: 27 },
{ type: 'Banana', value: 25 },
{ type: 'Orange', value: 18 },
{ type: 'Peach', value: 15 },
{ type: 'Other', value: 8 },
];
const rosePlot = new G2Plot.Rose(container, {
forceFit: true,
title: { visible: true, text: 'A Basic Rose Chart' },
description: { visible: true, text: 'Declare (colorField) as the field maps to color channel.' },
radius: 0.8,
data,
radiusField: 'value',
categoryField: 'type',
colorField: 'type',
label: { visible: true, type: 'outer', content: (text) => text.value },
});
rosePlot.render();
}
G2Plot에 대한 자세한 내용은 웹 사이트를 방문하여 더 많은 데모 및 자습서를 보거나 GitHub 리포지토리에 별표를 표시하십시오.
G2Plot을 사용하기 위해 문법에 대해 걱정할 필요는 없지만 여전히 "택시 노미"를 배워야 합니다. 주어진 데이터 세트에 어떤 차트 유형을 사용해야 합니까? 누적 막 대형 차트와 그룹화 된 막 대형 차트의 차이점은 무엇입니까?
경우에 따라 이러한 문제를 피할 수 있도록 "AI"가 있습니다!
자동 추천 및 차트 생성
등록된 댓글이 없습니다.
