跳到主要内容

算盘入门第二篇-应用开发

一个简单案例体验

场景描述​

完成一个应用开发，实现功能包括上传一份 CSV 数据，设计一个 Web 页面将数据做成报表，支持浏览器链接访问。

步骤拆解​

  1. 打开算盘，点击左侧【应用开发】进入应用开发频道，点击【+项目】，新建一个应用开发。

image.png

  1. 左侧组件栏中搜索场景中要用的组件【CSV上传】【数据转换(csv2Json)】，拖入到画布上。

image.png

  1. 切换至前面板，选择【柱形图和按钮组件】拖入到画布上任意位置（图表排布操作和PPT相似）。

    注：图表属性样式修改参考帮助文档中前面板组件，本篇主要讲解开发流程，图标样式可以不用修改

image.png image.png

  1. 切换到后面板，将所有组件连接起来。

image.png

  1. 部署运行，并上传csv，csv上传.csv。

image.png image.png

若在画布中原有节点的配置页面内，没有看到【上传】按钮，则点击该图标。 image.png image.png image.png image.png

为表格插入index列。 image.png image.png

  1. 打开前面板页面，点击【按钮】获取数据。

    操作：点击右下角【预览】区域以及右上角【预览】图表都可以实现对前面板的预览

image.png

在打开的网页中，点击【按钮】，触发数据流，即可在柱状图中看到csv文件中的数据展示。 image.png image.png