如何使用 UI5 web Component的React框架的柱状图和折线图
【摘要】 导入柱状图和折线图：import { BarChart, LineChart } from “@ui5/webcomponents-react-charts”；在自定义的React Component里，为图标创建数据集和数据标签对应的JavaScript数组：最后在React 自定义组件里，直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组：最后...
导入柱状图和折线图：
import { BarChart, LineChart } from “@ui5/webcomponents-react-charts”；
在自定义的React Component里，为图标创建数据集和数据标签对应的JavaScript数组：
最后在React 自定义组件里，直接为LineChart和BarChart这两个标签页维护刚才创建好的JavaScript数组：
最后的效果，折线图：
柱状图：
不出意外，还是通过canvas实现的：
导入组件@ui5/webcomponents-react-base：
然后在第17行的Text标签里给style属性附上值：spacing.sapUiContentPadding的值在运行时为padding: 1rem
这个值定义在文件夹C:\temp\react\my-app\node_modules@ui5\webcomponents-react-base\cjs下面的文件base.development.js里：
打开SAP云平台 portal Service的Content manager：
点击My Content，创建一个新的portal应用：
我们的自定义url就在这个新建应用的字段URL里维护：
创建的应用如下图所示：
再创建一个新的group：
将之前创建的url应用分配给这个group：
点击Go to site，打开url：
即可看到之前创建的URL应用出现在Launchpad里：
点击tile，即可在portal里打开对应的url：
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）