社区
Web 开发
帖子详情
highcharts如何动态加载y轴的数据
sdfsf双方各
2014-01-22 09:01:05
项目用到highcharts展现报表,客户要求是x轴时间,y轴是价格单位。x轴的时间跨度为1天,当客户查看3年中的数据的时间,x轴就会变成365*3这么多个区间(这是不合理的),问有没有异步方法,比如,鼠标悬浮在折线图的最右边,就会触发加载x轴的后续动态数据,鼠标悬浮在折线图的最左边,就会触发加载x轴的前面的节点的动态数据?
...全文
370
4
打赏
收藏
highcharts如何动态加载y轴的数据
项目用到highcharts展现报表,客户要求是x轴时间,y轴是价格单位。x轴的时间跨度为1天,当客户查看3年中的数据的时间,x轴就会变成365*3这么多个区间(这是不合理的),问有没有异步方法,比如,鼠标悬浮在折线图的最右边,就会触发加载x轴的后续动态数据,鼠标悬浮在折线图的最左边,就会触发加载x轴的前面的节点的动态数据?
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
4 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
咖啡加糖_
2014-01-23
打赏
举报
回复
我觉得你可以加上日期查询条件,默认可能让他看一个月的数据,然后让他自己选择,根据他选择的日期做个查询把最新的查询出来....
sdfsf双方各
2014-01-22
打赏
举报
回复
问题的标题描述错了,应该为highcharts如何动态加载X轴的数据。谢谢
Friends8811
2014-01-22
打赏
举报
回复
后台数据拼装好后 传到前台就行了
Highcharts
-8.1.2.zip
Highcharts
是一个用纯 JavaScript 编写的一个图表库, 能够很简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表,并且免费提供给个人学习、个人网站和非商业用途使用。
Highcharts
支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。 兼容性
Highcharts
可以在所有的移动设备及电脑上的浏览器中使用,包括 iPhone,iPad 和 IE6 以上的版本,在 IOS 和 Android 系统中
Highcharts
支持多点触摸功能,因而可以给您提供极致的用户体验。在现代的浏览器中使用 SVG 技术进行图形绘制,在低版本 IE 则使用 VML 进行图形绘制。 free非商业使用免费 在个人网站、学校网站及非盈利机构中使用
Highcharts
完全不需要经过我们的许可,直接可以任意使用! 商业网站或网站,请查看我们的 使用协议及价格。 open开源
Highcharts
最重要的特点之一就是:无论免费版还是付费版,你都可以下载源码并可以对其进行编辑。 基于开源社区我们可以第一时间获取用户的需求、及时的 Bug 修复及吸收社区贡献。 no-backend纯 JavaScript
Highcharts
完全基于 HTML5 技术,不需要再客户端安装任何插件,如 Flash 或 Java。此外你也不用配置任何服务端环境,不需要 PHP、Tomcat、ASP.NET 等,只需要两个 JS 文件即可运行。 chart-types丰富的图表类型
Highcharts
支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。 config-syntax简单的配置语法 在
Highcharts
中设置配置选项不需要任何高级的编程技术,所有的配置都是 JSON 对象,只包含用冒号连接的键值对、用逗号进行分割、用括号进行对象包裹。JSON 具有易于人阅读和编写,同时也易于机器解析和生成的特点。
动态
交互性
Highcharts
支持丰富交互性,在图表创建完毕后,可以用丰富的 API 进行添加、移除或修改
数据
列、
数据
点、坐标轴等操作。 结合 jQuery 的 ajax 功能,可以做到实时刷新
数据
、用户手动修改
数据
等功能,结合事件处理,可以做到各种交互功能。 支持多坐标轴 多个
数据
进行对比这是非常常见的需求,
Highcharts
可以让你为每个类型的
数据
添加坐标轴,每个轴可以定义放置的位置,所有的设置都可以独立生效,包括旋转、样式设计和定位,当然也支持多个
数据
共用一个坐标轴。 tooltip
数据
提示框 当鼠标划过图形时,
Highcharts
可以将
数据
点或
数据
列的信息展示在提示框中,并且提示框会跟随用户的鼠标;我们做了大量工作,可以智能的显示离鼠标最近的点或被遮盖点的信息。 datetime时间轴 75% 的直角坐标系(包含 X轴 和
Y轴
)图表中是时间轴图表,因为
Highcharts
对时间轴的处理非常智能。
Highcharts
以毫秒为单位,可以精确的计算出月、周、日、小时、分钟等时间刻度的位置。 exporting导出和打印
Highcharts
支持导出功能,用户可以一键导出 PNG、JPEG、PDF 或 SVG 文件,通过插件可以实现导出为 Excel 文件功能;另外,用户还可以从网页上直接打印图表。 zooming缩放和钻取 通过缩放可以方便的查看不同范围的
数据
;通过钻取可以方便的查看不同级别的详细
数据
。 ajax方便
加载
外部
数据
Highcharts
的
数据
是 JavaScript 数组或对象,这些
数据
可以是本地的配置对象,独立的
数据
文件(JSON、CVS)甚至是不同的网站上定义。另外,这些
数据
可以用任何形式处理好并
加载
到
Highcharts
中。 gauges仪表图 仪表图对于 Dashboard 来说特别理想,这种图表就像速度计一样,一眼就可以轻松阅读。 ajax极地图 折线图、面积图、柱形图等图形可以通过一个简单的配置转换成极地图、雷达图。 inverted图表或坐标轴反转
Highcharts
支持图表反转(X 轴或
Y轴
对调),这样 X轴是垂直的,方便进行
数据
对比;坐标轴旋转则可以坐标轴的最大值和最小值显示对调。 rotation文本旋转 图表中所有的文本,包括坐标轴标签、
数据
标签等都可以进行任意角度旋转。
highcharts
视图的三种使用操作
工作中关于视图的复杂操作很多,但查找案例时发现都不是自己需要的。我花时间将自己用到的三种操作实现后整理了一下,希望能帮到有相同需求的朋友。 1.异步设置x轴
y轴
数据
2.视图中添加下拉框筛选
数据
3.异步添加
数据
的案例
highcharts
如何设置
Y轴
数值
yAxis: { title: { text: '作品数' }, //自定义
y轴
数值 //方法1: //tickPositions:[0,1,2,3,4,5,6,7,8,9,10] //方法2: min:0 ,//最小值 tickIn...
Highcharts
属性与
Y轴
数据
值刻度显示
Y轴
最小最大值
Highcharts
官网:https://www.hcharts.cn/demo/
highcharts
Highcharts
API文档:https://api.hcharts.cn/
highcharts
#yAxis.tickmarkPlacement
Highcharts
属性与
Y轴
数据
值刻度显示
Y轴
最小最大值
Highcharts
.setOptions({...
HighCharts
(3)
动态
加载
数据
的方式
(1)先看一眼整体流程图(2)我觉得最重要的部分就是
数据
的处理部分,当然
数据
的获取我没在上图画出来,下面给出我的servlet(框架ssm) @RequestMapping(value="/systemHistory",method=RequestMethod.POST) public void systemHistoryPOST(@RequestParam String dateS
Web 开发
81,095
社区成员
341,712
社区内容
发帖
与我相关
我的任务
Web 开发
Java Web 开发
复制链接
扫一扫
分享
社区描述
Java Web 开发
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章