HighCharts: 设置时间图x轴的宽度
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/include/include_taglibs.jsp"%> {
"code":0,
"data":{
"content":"
<script type='text/javascript'>
try{
var options = {
chart: {
renderTo: '${biz}Trend',
type: 'spline',
height: 215,
width: 460
},
exporting: {
enabled: false
},
title: {
text: '',
x: -20
},
subtitle: {
text: '趋势分析',
x: -160
},
xAxis: {
maxPadding : 0.1,
minPadding : 0.1,
tickWidth:5,
type: 'datetime',
labels: {
rotation: -20,
y: 30,
formatter: function() {
return Highcharts.dateFormat('%Y-%m-%d', this.value);
}
}
},
yAxis: {
title: {
text: ''
},
min: 0
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
Highcharts.dateFormat('%Y-%m-%d', this.x) +': '+ this.y;
}
},
series: [
<s:iterator id='aqtsMap' value='#request.quoteTrendsSeries' status='astat'>
{
<s:iterator id='bqtsKey' value='#aqtsMap.keySet()' status='bstat'>
<s:set name='cqtsList' value='#aqtsMap.get(#bqtsKey)'></s:set>
name: '${bqtsKey}',
data: [
<s:iterator id='dqts' value='#cqtsList' status='dstat'>
[Date.UTC(<s:date name='#dqts.time' format='yyyy'/>,Highcharts.numberFormat(<s:date name='#dqts.time' format='MM'></s:date>,0)-1,<s:date name='#dqts.time' format='dd'/>),<s:property value='#dqts.count'/>]<s:if test='!#dstat.last'>,</s:if>
</s:iterator>
]
</s:iterator>
}
<s:if test='!#astat.last'>,</s:if>
</s:iterator>
]
};
var chart = new Highcharts.Chart(options);
}catch(e){}
</script>
"}}
HighCharts: 设置时间图x轴的宽度的更多相关文章
- highcharts 设置柱子之间的距离 柱子宽度
plotOption : { column : { // 设置每个柱自身的宽度 pointWidth : // x轴每个点只用一个柱,则这个属性设置的是相邻的两个点的柱之间的间距. // 如果x轴每个 ...
- Highcharts属性与Y轴数据值刻度显示Y轴最小最大值
Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...
- highchart 设置双Y轴坐标 双x轴坐标方法
我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...
- Easyui datagrid 设置内容超过单元格宽度时自动换行显示
datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...
- GridView 显示行号 设置行号列的宽度
/// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="gv" ...
- Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度
需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...
- highcharts设置Y轴范围及根据Y轴范围设置不同颜色
yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...
- highcharts.js的时间轴折线图
工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...
- highcharts 不显示X轴 Y轴 刻度
xAxis: { tickWidth:0, //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0, //设置坐标宽度 la ...
随机推荐
- 【BZOJ】【1091】【SCOI2003】切割多边形
计算几何+枚举 我比较傻逼……一开始想了个贪心,就是这样:
- Java中使用Jedis操作Redis之二
import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.J ...
- 数据库实例: STOREBOOK > 用户 > 编辑 用户: PUBLIC
ylbtech-Oracle:数据库实例: STOREBOOK > 用户 > 编辑 用户: PUBLIC 编辑 用户: PUBLIC 1. 一般信息返回顶部 1.1, 1.2, 2 ...
- 数据库实例: STOREBOOK > 用户 > 编辑 用户: MGMT_VIEW
ylbtech-Oracle:数据库实例: STOREBOOK > 用户 > 编辑 用户: MGMT_VIEW 编辑 用户: MGMT_VIEW 1. 一般信息返回顶部 1.1, ...
- Gson 使用总结 高级用法
Gson基本用法 参考:http://www.jianshu.com/p/e740196225a4 Gson提供了fromJson() 和toJson() 两个直接用于解析和生成的方法,前者实现反序列 ...
- 集合 数组 定义 转换 遍历 Arrays API MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- 页面的缓存设置与meta的作用详细解释
网上转的,来自JSP的,但是原理大同小异哦,有时间 写个asp.net版的 HTML的HTTP协议头信息中控制着页面在几个地方的缓存信息,包括浏览器端,中间缓存服务器端(如:squid等),Web服务 ...
- 理解HTML5数据推送应用开发问题
一.数据推送 SSE是一种允许服务端向客户端推送新数据(通常称作数据推送)的HTML5技术.那么,究竟什么是数据推送?它与我们可能用过的其他技术有什么不同呢? 让我先来回答什么不是数据推送.数据推送有 ...
- 解决duilib使用zip换肤卡顿的问题(附将资源集成到程序中的操作方法)
转载请说明原出处,谢谢~~ 今天在做单子是.客户要求做换肤功能,为此我专门写了一个换肤函数,而且把各种皮肤资源压缩为各个zip文件来换肤.可是客户反映程序执行缓慢,我測试后发现的确明显能够看出慢了不少 ...
- WordPress 后台上传自定义网站Logo
需求: 众所周知一般网站的logo都是固定的所以我在做网站时也是使用的静态logo文件,但最近用wp给一个客户做的网站时,因为网站现在的logo可能会需要重新设计,所以客户提出了需要在后台可以自己修改 ...