HighCharts: 设置时间图x轴的宽度

这个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>
"}}
时间: 2024-10-11 14:52:42

HighCharts: 设置时间图x轴的宽度的相关文章

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

Highcharts 官网:https://www.hcharts.cn/demo/highcharts Highcharts API文档:https://api.hcharts.cn/highcharts#yAxis.tickmarkPlacement Highcharts属性与Y轴数据值刻度显示Y轴最小最大值 Highcharts.setOptions({global:{useUTC : false}}); $(function(){ //声明报表对象 var chart = new Hig

缩放窗口时随一个div宽度设置另一个div的宽度

1.获取页面的宽度 window.onresize=findDimensions;    function findDimensions() //函数:获取尺寸    {    //结果输出至两个文本框        $("#heightscrollbardivtwo").width($("#heightscrollbardiv").width()+22);    } 缩放窗口时随一个div宽度设置另一个div的宽度,布布扣,bubuko.com

如何设置Eclipse工作区默认编辑宽度

1)打开Window  => Preferences窗口 2)打开Formatter属性页从Java => CodeStyle => Formatter 3) 单击New创建一个自己的Formatter 4)选择Line Wrapping属性页,并设置Maximum line width 为160 5)然后一路OK就可以了 如何设置Eclipse工作区默认编辑宽度

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

datagrid 设置内容超过单元格宽度时自动换行显示 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 问题描述 单元格内容超过单元格宽度不会自动化换行.如下: 图1: 图2: 解决方法 定义表格时,设置nowrap属性为false. <table id='tt' class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:

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

需求:如图,y轴之间的距离太小,这样就太过于拥挤了,现在要修改echarts里面的属性,设置y轴值间隔让图表看上去舒服一些. 其实很多问题,真的只是因为自己没有好好的看文档,很多文档上面都写的清清楚楚的,主要是设置这段代码,max(设置y轴最大值)和splitNumber 总结一下公式就是, max/ splitNumber=y轴值间隔 (比如将y轴200平均成5个点,每个点的间距就是40) yAxis : [ { // 纵轴标尺固定 type : 'value', scale : true,

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

yAxis : { title : { text : '数据' }, plotLines : [ { value : 0, width : 1, color : '#808080' } ], min: 30, //最小 tickInterval: 10, //步长 max:150,//最大 // 不同Y轴范围设置不同颜色 begin plotBands: [{ from: 30, to: 60, color: 'rgba(168, 255, 213, 0.3)', label: { text:

highcharts设置Y轴固定高度

yAxis: {     tickPositions: [0, 20, 50, 100] // 指定竖轴坐标点的值 }

highcharts.js的时间轴折线图

工作中正好用到. 鼠标按住左键 左右移动可以试试 <!DOCTYPE> <html lang='en'> <head> <title>4-Highcharts曲线图之时间轴折线图</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script src="../jquery-2.1

Oracle--sqlplus如何设置SQLPlus结果显示的宽度,ORACLE sqlplus提示符设置

一.SQLPlus查询的结果,可以根据自己的屏幕情况进行调节,设置如下: 1.设置一页面显示多少行数 show pagesize;   //首先查看目前的pagesize,默认是14 set pagesize 100; //将pagesize设置好100,则可以一次显示够多行记录了 2.设置行的宽度 show linesize;   //查看目前的linesize,默认是80 set linesize 150; //设置成150或者更宽都可 注:以上的方法是临时有效的方法 二.永久设置sql*p