BizCharts Documentation

The Polygon component is used to draw closed shapes formed by multiple points. Common use cases include:

• Color block diagrams generated from multiple categorical data.
• Mosaic charts generated from continuous data.
• Polygons formed by multiple points like maps.
• Filled tree diagrams generated from hierarchical data.

The View component is generated and managed by a Chart. Each View possesses its own independent data source, coordinate system, and layers. Use View to achieve:

• Multi-layer charts: When displaying multiple charts with different coordinate systems in the same container (e.g., multi-layer pie charts).
• Heterogeneous data visualization: When charts in the same container require different data sources (e.g., comparative funnel charts).

Note: The API available on a View is largely identical to that of a Chart.

Due to organizational changes, BizCharts is no longer being actively maintained. The official website database will be taken offline.

Recommendation: Users are encouraged to migrate to the AntV ecosystem. Since the AntV API is the same source as BizCharts, the migration cost is low. Documentation for BizCharts has been moved to the docs directory within this repository.

The DataSet module provides two primary stages of data processing:

1. Data Connection (Connector): Responsible for importing and normalizing data (e.g., converting CSV or GeoJSON into standard JSON).
2. Data Transformation (Transform): Responsible for various operations:
   • Data Processing: filter, map, fold (data completion), etc.
   • Statistical Functions: Aggregation, percentage, binning, etc.
   • Specialized Processing: Handling geographic data, treemaps, Sankey diagrams, and word clouds.

The LineAdvance component is an enhanced version of the standard Line component. While <Line /> only draws lines, <LineAdvance /> provides advanced presets for line charts, including data points (points), gradient area projections (area), and more complex styling. It was introduced in version ^4.0.12.

Basic data format example:

const data = [
 {"x": "1991", "y": 123, "type": "A"},
 {"x": "1991", "y": 123, "type": "B"},
 {"x": "1992", "y": 123, "type": "A"},
 {"x": "1992", "y": 123, "type": "B"},
 {"x": "1993", "y": 123, "type": "A"},
 {"x": "1993", "y": 123, "type": "B"}
]

<Chart data={data} width={500} autoFit >
  <LineAdvance position="x*y" color="type" />
</Chart>

You can change or restrict the default built-in interactions (like tooltip, legend-active, legend-filter, and continuous-filter) by passing the defaultInteractions prop to the Chart component. This prop accepts an array of interaction names.

Example: To keep only the tooltip interaction, pass ['tooltip'] to defaultInteractions.

<Chart
  scale={scale}
  height={500}
  data={source}
  autoFit
  defaultInteractions={['tooltip']} // Only keeps tooltip
>
</Chart>

You can use RangeBarChart in your React application using either full destructuring or on-demand (tree-shaking) imports.

Full destructuring:

import { RangeBarChart } from 'bizcharts';

On-demand import (ESM):

import RangeBarChart from 'bizcharts/lib/plots/RangeBarChart';
// Or for es modules:
import RangeBarChart from 'bizcharts/es/plots/RangeBarChart';

import { RangeBarChart } from 'bizcharts';

function APP() {
  return <RangeBarChart {...options} />;
}

BizCharts supports JSON arrays as a primary data format. Each object in the array represents a data point, typically containing key-value pairs that map to chart dimensions and measures.

var data = [
  {"gender":"男","count":40},
  {"gender":"女","count":30}
];