highstock怎么修改浮窗中的时间格式显示?

1.formatter方式

优点:易于控制格式,支持js多种方法

缺点:只有一个浮窗

tooltip : {
    formatter : function() {
        var sum = 0;
        var content = '';
        for (var i = 0; i < this.points.length; i++) {
            sum = this.points[0].point.stackTotal;
            //sum += this.points[i].y;
            content += '<span style="color: ' + this.points[i].series.color + '">'                 
                    + this.points[i].series.name + '</span>: ' + 
                    this.points[i].y.toFixed(2) + '小时<br/>';
        };
                        		      
        //var t = pattern.exec(formatDateTime(new Date(this.x)))[0];
        var t = Highcharts.dateFormat('%Y-%m-%d', new Date(this.x))
        content += '<span style="font-size: 10px;">' + t + '总时间:'+ sum +'小时 
                   </span><br/>';
        return content;
    }
},

2.pointFormat等多数据和横坐标都有浮窗

tooltip: {
    split: true,
    shared: true,
    followTouchMove: true,
    shape: 'callout',
    //xDateFormat: '%Y-%m-%d %H:%M:%S.%L',
    xDateFormat: '%Y-%m-%d',
    headerFormat: '<small class="headerFormat">{point.key}总时间:{point.stackTotal}小        
                  时<div></div></small><table>',
    pointFormat: '<tr><td style="color: {series.color}"><b>{series.name}: </b> 
                 </td>' +
                 '<td style="text-align: right"><b>{point.y:.2f}小时</td></tr>',
    footerFormat: '</table>',
    valueDecimals: 2
},

x轴时间格式:

xAxis: {
    type : 'datetime',
    min : 0,
    dateTimeLabelFormats: {//时间格式
        day : '%m-%d',
        week : '%m-%d',
        month : '%y-%m',
        year : '%Y'
    },
    tickPixelInterval : 0,//刻度间隔为0
    labels : {
        align : 'left',
        style : {
            color : '#888'
        },
        fontSize : '12px',
        fontFamily : 'Verdana, sans-serif',
        rotation : '75',//调节倾斜角度偏移
        y : 20,
        x : -3,
        tickInterval : 0,
        tickmarkPlacement : 'between'
    }
},

一般情况下已经够用了,但是有的时候浮窗就是不按lang设置的时间用中文显示,先检查一下,注意是shortMonths而不是months哦

Highcharts.setOptions({
    global : {
        useUTC : false//世界时间
    },
    lang: {
        rangeSelectorZoom : '范围:',
        shortMonths : ['一月', '二月',
            '三月', '四月', '五月',
            '六月', '七月', '八月',
            '九月', '十月', '十一月',
            '十二月'],
        weekdays : [ '星期日', '星期一',
            '星期二', '星期三',
            '星期四', '星期五', '星期六' ]
    }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值