H-chart使用解析

H-chart使用解析


官网演示文件下载https://www.hcharts.cn/download。下载完成后可以直接解压点击index.htm就能够查看演示

为了方便起见,可以新建一个web项目,将上面的解压文件放到WebContent中去直接运行index.htm就行。

页面中的数据格式一般为Json格式series标签就是用来放数据的

 series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]

后台数据传输方式:request.setAttribute("rainfall", l.get(1).getData());

前台数据接收方式

<% 
	String Rainfall=(String)request.getAttribute("rainfall");
	
	%>
赋值方式:<%=Rainfall%>


更多H-chart的属性参考官网属性。


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
uni-app是一个基于Vue.js开发的跨平台应用框架,可以帮助开发者快速构建多端应用。而vue-tree-chart是一个基于Vue.js的树形图组件,用于展示树形结构的数据。 使用vue-tree-chart组件,可以按照以下步骤进行: 1. 在uni-app项目的根目录下,使用npm或yarn命令安装vue-tree-chart包。可以使用以下命令进行安装: ``` npm install vue-tree-chart ``` 或者 ``` yarn add vue-tree-chart ``` 2. 在需要使用vue-tree-chart组件的uni-app页面中,引入vue-tree-chart的代码。可以使用以下代码进行引入: ```javascript import VueTreeChart from 'vue-tree-chart'; ``` 3. 在页面的template部分,使用vue-tree-chart组件进行树形图的展示。可以使用以下代码进行使用: ```html <template> <view> <vue-tree-chart :data="treeData"></vue-tree-chart> </view> </template> ``` 其中,treeData是一个保存树形结构数据的变量,需要在data中进行定义。 4. 在页面的script部分,为treeData赋值具体的树形结构数据。可以使用以下代码进行赋值: ```javascript <script> export default { data() { return { treeData: [ { label: '节点1', children: [ { label: '节点1-1', }, { label: '节点1-2', children: [ { label: '节点1-2-1', }, { label: '节点1-2-2', }, ], }, ], }, { label: '节点2', children: [ { label: '节点2-1', }, { label: '节点2-2', }, ], }, ], }; }, }; </script> ``` 通过以上步骤,我们就可以在uni-app项目中使用vue-tree-chart组件展示树形结构的数据了。在实际使用中,可以根据具体需求对树形图进行样式和交互的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猪头的彩虹糖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值