这个x轴宽度的设置整了好久,被老板催的要死
highcharts的api文档很难找,找了半天也没找到,网上资料少,说的试了下,也没有,我用的图里api文档里没有介绍,这个属性不知道的话,根本不好找。为此,记录下这次事件
 
 
实例代码:
<%@ 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轴的宽度的更多相关文章

  1. highcharts 设置柱子之间的距离 柱子宽度

    plotOption : { column : { // 设置每个柱自身的宽度 pointWidth : // x轴每个点只用一个柱,则这个属性设置的是相邻的两个点的柱之间的间距. // 如果x轴每个 ...

  2. Highcharts属性与Y轴数据值刻度显示Y轴最小最大值

    Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcha ...

  3. highchart 设置双Y轴坐标 双x轴坐标方法

    我们的图表一旦引入了两种不同单位或者数量级相差很大的数据以后,这时候需要两种坐标对其进行计量. 下面以设置双Y轴为例, y轴坐标的参数设置成: yAxis: [{ title: { text: '坐标 ...

  4. Easyui datagrid 设置内容超过单元格宽度时自动换行显示

    datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下 ...

  5. GridView 显示行号 设置行号列的宽度

    /// <summary> /// GridView 显示行号 设置行号列的宽度 /// </summary> /// <param name="gv" ...

  6. Echarts设置y轴值间隔 以及设置 barWidth : 30,//柱图宽度

    需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些.     其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的 ...

  7. highcharts设置Y轴范围及根据Y轴范围设置不同颜色

    yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: ...

  8. highcharts.js的时间轴折线图

    工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcha ...

  9. highcharts 不显示X轴 Y轴 刻度

    xAxis: { tickWidth:0,        //设置刻度标签宽度 lineColor:'#ffffff',//设置坐标颜色 lineWidth:0,        //设置坐标宽度 la ...

随机推荐

  1. Latex 初学者入门(四)-- 多个作者共享同一个地址

    又给老板改格式,其实感觉大多会议都是模板不同,不同主要在于注释,作者,摘要以及引用文献的不同,上次的那篇讲bib数据库的用法,真是倒腾了一整天,不知道为什么一定要使用这种东西,而且老板貌似对人家的风格 ...

  2. Top N之MapReduce程序加强版Enhanced MapReduce for Top N items

    In the last post we saw how to write a MapReduce program for finding the top-n items of a dataset. T ...

  3. C语言:通过指针函数输出二维数组中每个学生的成绩

    // //  main.c //  Pointer_function // //  Created by ma c on 15/8/2. //  Copyright (c) 2015年 bjsxt. ...

  4. hdu1226 超级密码 (BFS,里面用了大数取余原理)

    Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息: 密码是一个C进 ...

  5. Android硬件入门-照相机

    学习Android不能不学习照相机,现在各种美容相机,微信朋友圈发图,现在升级之后直接下拉就可以照相了,各种艳照的的源头也是照相机,扯远了,有点邪恶了,还是简单学习一下Android中照相机的使用,A ...

  6. C# 开发者代码审查清单

    这是为C#开发者准备的通用性代码审查清单,可以当做开发过程中的参考.这是为了确保在编码过程中,大部分通用编码指导原则都能注意到.对于新手和缺乏经验(0到3年工作经验)的开发者,参考这份清单编码会很帮助 ...

  7. scala 学习笔记十二 继承

    1.介绍 继承是面向对象的概念,用于代码的可重用性.可以通过使用extends关键字来实现继承. 为了实现继承,一个类必须扩展到其他类,被扩展类称为超类或父类.扩展的类称为派生类或子类. Scala支 ...

  8. 以上帝模式管理Windows系统

    上帝模式,,即"God Mode",或称为"完全控制面板".是Windows Vista/7系统中隐藏的一个简单的文件夹窗口,但包含了几乎所有Windows系统 ...

  9. 在Hadoop上运行基于RMM中文分词算法的MapReduce程序

    原文:http://xiaoxia.org/2011/12/18/map-reduce-program-of-rmm-word-count-on-hadoop/ 在Hadoop上运行基于RMM中文分词 ...

  10. 我所认识的PCA算法的princomp函数与经历 (基于matlab)

    我接触princomp函数,主要是因为实验室的项目需要,所以我一接触的时候就希望快点学会怎么用. 项目中需要利用PCA算法对大量数据进行降维. 简介:主成分分析 ( Principal Compone ...