如何使用SAP UI5 web Component的React框架的柱状图和折线图

导入柱状图和折线图:

如何使用SAP UI5 web Component的React框架的柱状图和折线图



import { BarChart, LineChart } from “@ui5/webcomponents-react-charts”;


在自定义的React Component里,为图标创建数据集和数据标签对应的JavaScript数组:

如何使用SAP UI5 web Component的React框架的柱状图和折线图



最后在React 自定义组件里,直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组:


如何使用SAP UI5 web Component的React框架的柱状图和折线图


最后的效果,折线图:


如何使用SAP UI5 web Component的React框架的柱状图和折线图


柱状图:

如何使用SAP UI5 web Component的React框架的柱状图和折线图


不出意外,还是通过canvas实现的:


如何使用SAP UI5 web Component的React框架的柱状图和折线图

上一篇:SAP UI5 web Component里的条件渲染机制


下一篇:SAP UI5 web Component的React组件,如何实现事件响应