023-68661681
返回
本教程旨在展示如何实时（每隔一段时间10ms）以及根据用户交互更新 AG 图表。完成本教程后，将得到如下所示的图表：
项目设置
首先，需要配置项目。先使用 Vite 创建一个新的 React 应用，然后安装必要的依赖项：
npm create vite@latest ag-charts-realtime-updates-demo -- --template react cd ag-charts-realtime-updates-demo npm install
然后就可以安装 AG Charts React 库了：
npm install ag-charts-react
生成数据
在创建图表之前，需要一些数据来展示。请查看下面的数据集，其中包含一个产品数组及其对应的价格数据。数组中的每个对象代表 x 轴上的一个类别（产品），每个属性（上一价、当前价、pl1、pl2）将以柱状图的形式绘制在 y 轴上：
[
{
"product": "Cobalt",
"previous": 10817.55,
"current": 27893.21,
"pl1": 23667.47,
"pl2": 16694.04
},
{
"product": "Rubber",
...
}
...
]
接下来，为了实时更新图表中显示的数据，需要一种动态生成数据的方法。为了简化操作，已经预先构建了这部分逻辑。只需下载DataGenerator.js下面的文件并将其添加到项目中即可：
当然，可以查看源代码，但这里需要记住的是，可以调用该函数createNewDataSet()来创建一个包含每个产品更新价格数据的新数据集。
创建图表
现在已经完成了项目设置，并且有了动态生成数据的方法，可以开始实现图表了。
首先要做的是创建一个新PriceChart.jsx组件并导入AgChartsReact，以及createNewDataSet实用方法。
import React, { useState } from "react";
import { AgChartsReact } from "ag-charts-react";
import createNewDataSet from "./DataGenerator";
export default function PriceChart() { }
接下来，创建一个chartOptions变量（用于配置和更新图表），并通过属性<AgChartsReact />传递对象来返回组件：chartOptionsoptions
export default function PriceChart() {
const [chartOptions, setChartOptions] = useState({});
return (<AgChartsReact options={chartOptions} />)
}
然后，可以将这个新组件渲染到根元素中index.js：
import React from "react";
import ReactDOM from "react-dom/client";
import PriceChart from "./PriceChart";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<PriceChart />);
配置图表
现在已经有了图表的基本框架，接下来需要根据应用程序的需求进行配置。请将以下属性添加到chartOptions对象中：
const [chartOptions, setChartOptions] = useState({
title: { text: "Price Data" },
subtitle: { text: "December 1st, 2023" },
theme: "ag-vivid-dark",
height: 750,
data: createNewDataSet()
series: ["previous", "current", "pl1", "pl2"].map(
(yKey) => ({
type: "bar",
xKey: "product",
yKey: yKey
})
),
}
逐一分析这些属性，并解释它们的作用：
- title，subtitle：显示在图表顶部的文本。
- theme：图表预设样式。已选择了一种样式ag-vivid-dark，但也可以从主题列表中选择其他样式。
- height默认情况下，图表会自动调整大小以填充其容器元素。通过指定高度height: 750，可以强制图表保持固定的高度，而不管其容器大小如何。由于没有指定宽度，因此图表将填充其容器元素（在本例中为 100%）。
- data：要在图表中可视化的数据集，由该方法动态生成createNewDataSet。
- series：通过循环遍历价格指标创建一系列序列，每个产品生成 4 个柱状图——每个价格指标对应一个柱状图。
此时运行图表应该会显示一个条形图，y 轴上绘制 6 个数据点，x 轴上对应每种产品：
更新图表
现在已经完成了图表的配置，可以开始实时触发数据更新了。
更新图表非常简单——只需要克隆、修改和更新chartOptions对象，图表就会自动处理任何更改：
// Update Chart Data
const updateStockPrices = () => {
setChartOptions((currentOptions) => ({
...currentOptions,
data: createNewDataSet(),
}));
};
然后可以使用它setInterval来调用updateStockPrices()每个函数10ms。将在一个带有空依赖数组的钩子函数中执行此操作useEffect，以便在图表渲染时触发此操作：
useEffect(() => {
let interval = setInterval(() => {
updateStockPrices();
}, 10);
return () => clearInterval(interval);
}, []);
就这样，你现在应该有一个每隔一段时间更新一次的图表了10ms：
处理用户交互
本教程的最后一部分将介绍如何根据用户交互更新图表。为了演示这一点，我们将添加两个按钮，分别用于切换图表的水平/垂直方向以及堆叠/分组柱状图模式。
我们将首先实现用于在堆叠柱状图/分组柱状图之间切换的按钮。
我们只需要实现一个函数，该函数更新我们的chartOptions对象，使其包含该stacked属性并为其赋值：
const toggleStacked = () => {
setChartOptions((currentOptions) => ({
...currentOptions,
series: currentOptions.series.map((seriesItem) => ({
...seriesItem,
stacked: !seriesItem.stacked,
})),
}));
};
然后，在我们的组件中添加一个按钮，该按钮调用此函数：
return (
<>
{/* Chart Controls */}
<div>
<button onClick={toggleStacked}>
{chartOptions.series[0].stacked ? "Group" : "Stack"}
</button>
</div>
{/* Chart component */}
<AgChartsReact options={chartOptions} />
</>
);
旋转图表的逻辑完全相同：创建一个函数来切换属性值direction，并添加一个按钮来调用此函数：
// Rotate Chart
const rotateDirection = () => {
setChartOptions((currentOptions) => ({
...currentOptions,
series: currentOptions.series.map((seriesItem) => ({
...seriesItem,
direction:
seriesItem.direction === "horizontal" ? "vertical" : "horizontal",
})),
}));
};
return (
<>
{/* Chart Controls */}
<div>
<button onClick={rotateDirection}>{"Rotate"}</button>
<button onClick={toggleStacked}>
{chartOptions.series[0].stacked ? "Group" : "Stack"}
</button>
</div>
{/* Chart component */}
<AgChartsReact options={chartOptions} />
</>
);
------------------------------------------------------------
关于慧都科技
慧都科技是一家行业数字化解决方案公司，长期专注于软件、油气与制造行业。公司基于深入的业务理解与管理洞察，以系统化的业务建模驱动技术落地，帮助企业实现智能化运营与长期竞争优势。在软件工程领域，我们提供开发控件、研发管理、代码开发、部署运维等软件开发全链路所需的产品，提供正版授权采购、技术选型、个性化维保等服务，帮助客户实现技术合规、降本增效与风险可控。慧都科技是AG Grid的在中国区的合作伙伴，AG Grid / AG Charts作为JavaScrip表格/图表领域的优秀产品，帮助企业实现轻松构建高性能的表格及图表。
发表评论