常见的图形库系列
Victory 图表基于 React，适合 React 项目，支持移动端
入门例子
Victory 是一个基于 React 的图表库，适合在 React 项目中使用。
例子
入门示例，展示如何使用 Victory 创建一个基本的柱状图（Bar Chart）。
[html]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Victory in Native HTML/JS</title>
<!-- 引入 React 和 ReactDOM -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 引入 Victory -->
<script src="https://unpkg.com/victory@35/dist/victory.min.js"></script>
</head>
<body>
<div id="root"></div>
<script>
// 在这里编写 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')
);
</script>
</body>
</html>
React 引入方式
[javascript]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<% raw %>
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 (
<div style=>
<h1>Victory 柱状图示例</h1>
<VictoryChart
theme={VictoryTheme.material} // 使用 Material 主题
domainPadding={20} // 柱子之间的间距
>
<VictoryAxis
tickValues={[1, 2, 3, 4]} // X 轴刻度值
tickFormat={["Q1", "Q2", "Q3", "Q4"]} // X 轴标签
/>
<VictoryAxis
dependentAxis // Y 轴
tickFormat={(x) => `$${x / 1000}k`} // Y 轴标签格式
/>
<VictoryBar
data={data} // 数据
x="quarter" // X 轴数据字段
y="earnings" // Y 轴数据字段
/>
</VictoryChart>
</div>
);
}
export default App;
<% endraw %>
