常见的图形库系列

常见的图形库概览-00-overview

常见的图形库概览-01-Chart.js 入门例子

常见的图形库概览-03-D3.js 入门例子

HighCharts 交互式图表-01-入门介绍

Plotly 函数图像绘制

ApexCharts 图表入门例子

Victory 图表基于 React，适合 React 项目，支持移动端

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

入门例子

Victory 是一个基于 React 的图表库，适合在 React 项目中使用。

例子

入门示例，展示如何使用 Victory 创建一个基本的柱状图（Bar Chart）。

    
    
    Victory in Native HTML/JS
    
    
    
    
    


    

    
        // 在这里编写 React 和 Victory 代码
		// 获取 Victory 组件
		const { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme } = Victory;

		// 数据
		const data = [
			{ quarter: 1, earnings: 13000 },
			{ quarter: 2, earnings: 16500 },
			{ quarter: 3, earnings: 14250 },
			{ quarter: 4, earnings: 19000 }
		];

		// 定义 React 组件
		function App() {
			return React.createElement(VictoryChart, {
				theme: VictoryTheme.material,
				domainPadding: 20
			},
				React.createElement(VictoryAxis, {
					tickValues: [1, 2, 3, 4],
					tickFormat: ["Q1", "Q2", "Q3", "Q4"]
				}),
				React.createElement(VictoryAxis, {
					dependentAxis: true,
					tickFormat: (x) => `$${x / 1000}k`
				}),
				React.createElement(VictoryBar, {
					data: data,
					x: "quarter",
					y: "earnings"
				})
			);
		}

		// 渲染 React 组件到 DOM
		ReactDOM.render(
			React.createElement(App),
			document.getElementById('root')
		);

React 引入方式

import React from 'react';
import { VictoryBar, VictoryChart, VictoryAxis, VictoryTheme } from 'victory';

// 数据
const data = [
    { quarter: 1, earnings: 13000 },
    { quarter: 2, earnings: 16500 },
    { quarter: 3, earnings: 14250 },
    { quarter: 4, earnings: 19000 }
];

function App() {
    return (
        
            Victory 柱状图示例
            
                
                 `$${x / 1000}k`} // Y 轴标签格式
                />
                
            
        
    );
}

export default App;